style: 更新按钮位置相关东西

Author: twp0217

README.md

@@ -33,7 +33,7 @@ export default () => {
 ### InlineEditProps
 
 | 名称           | 类型                 | 默认值    | 说明               |
-| -------------- | -------------------- | --------- | ------------------ | ---- |
+| -------------- | -------------------- | --------- | ------------------ |
 | className      | string               | -         | 类名               |
 | style          | React.CSSProperties  | -         | 样式               |
 | keepOpenOnBlur | `boolean`            | `false`   | 失去焦点时保持打开 |
@@ -43,7 +43,7 @@ export default () => {
 | defaultValue   | `string`             | -         | 默认值             |
 | isEditing      | `boolean`            | -         | 是否正在编辑       |
 | loading        | `boolean`            | -         | 加载中             |
-| placement      | `'top'               | 'bottom'` | -                  | 位置 |
+| placement      | `top` \| `bottom`    | -         | 按钮位置           |
 | readView       | `React.ReactNode`    | -         | 查看视图           |
 | editView       | `React.ReactNode`    | -         | 编辑视图           |
 | onEdit         | `() => void`         | -         | 编辑事件           |

package.json

@@ -1,18 +1,17 @@
 {
   "name": "@twp0217/react-inline-edit",
-  "version": "1.0.5",
+  "version": "1.0.6",
   "description": "Inline edit component for React",
   "scripts": {
     "start": "dumi dev",
     "docs:build": "dumi build",
     "docs:deploy": "gh-pages -d docs-dist",
     "build": "father-build",
     "deploy": "npm run docs:build && npm run docs:deploy",
+    "release": "npm run build && npm publish --access public",
     "prettier": "prettier --write \"**/*.{js,jsx,tsx,ts,less,md,json}\"",
     "test": "umi-test",
     "test:coverage": "umi-test --coverage",
-    "prepublishOnly": "npm run build",
-    "publish": "npm publish --access public",
     "commit": "git-cz",
     "version": "conventional-changelog -p angular -i CHANGELOG.md -s && git add CHANGELOG.md"
   },

src/InlineEdit.tsx

@@ -101,6 +101,7 @@ InlineEdit.defaultProps = {
   hideActions: false,
   confirmText: 'Confirm',
   cancelText: 'Cancel',
+  placement: 'bottom',
 };
 
 export default InlineEdit;

src/components/EditView.tsx

@@ -55,9 +55,10 @@ const EditView = (props: EditViewProps) => {
 
     return (
       <div
-        className={classNames('inline-edit-edit-view-actions', {
-          'inline-edit-edit-view-actions-placement-top': placement === 'top',
-        })}
+        className={classNames(
+          'inline-edit-edit-view-actions',
+          `inline-edit-edit-view-actions-placement-${placement}`,
+        )}
       >
         <button
           title={confirmText}

src/index.less

@@ -2,6 +2,7 @@
 @margin: 4px;
 @margin-top-actions: @margin / 2;
 @button-size: 24px;
+@button-bg: #fff;
 
 .inline-edit {
   &-container {
@@ -15,7 +16,7 @@
       line-height: 0;
       text-align: center;
       text-transform: none;
-      vertical-align: -0.125em;
+      vertical-align: -3px;
       text-rendering: optimizeLegibility;
 
       svg {
@@ -53,8 +54,10 @@
 
       &-placement {
         &-top {
-          top: -100%;
-          margin-top: -@margin-top-actions;
+          top: auto;
+          bottom: 100%;
+          margin-top: 0;
+          margin-bottom: @margin-top-actions;
         }
       }
 
@@ -65,8 +68,7 @@
         margin-right: @margin;
         padding: 0;
         font-size: 14px;
-        line-height: @button-size;
-        background: #fff;
+        background-color: @button-bg;
         border: 1px solid @border-color;
         border-radius: 2px;
         cursor: pointer;
@@ -76,7 +78,7 @@
         }
 
         &:hover {
-          background-color: fade(@border-color, 85%);
+          background-color: fade(@border-color, 25%);
         }
       }
     }