feat: Input 组件增加readOnly 属性

cuke-ui · Sep 6, 2018 · 9f08aff · 9f08aff
1 parent 75c664e
commit 9f08aff
Show file tree

Hide file tree

Showing 6 changed files with 17 additions and 9 deletions.
diff --git a/.travis.yml b/.travis.yml
@@ -24,7 +24,7 @@ before_script : "yarn test -u"
 
 script: 
   - yarn lint
-  - yarn test -u
+  - yarn test
   - yarn pub:doc
 
 after_script: "yarn coverage"
diff --git a/components/input/__tests__/__snapshots__/index.test.js.snap b/components/input/__tests__/__snapshots__/index.test.js.snap
@@ -17,6 +17,13 @@ exports[`<Input/> should render Input 1`] = `
     placeholder="请输入"
     type="number"
   />
+  <input
+    class="cuke-input"
+    placeholder=""
+    readonly=""
+    type="text"
+    value="我是只读"
+  />
   <input
     class="cuke-input cuke-input-disabled"
     disabled=""

diff --git a/components/input/__tests__/index.test.js b/components/input/__tests__/index.test.js
@@ -10,6 +10,7 @@ describe("<Input/>", () => {
 				<Input type="text" />
 				<Input type="password" placeholder="请输入" />
 				<Input type="number" placeholder="请输入" />
+				<Input readonly value="我是只读" />
 				<Input disabled placeholder="禁用" />
 			</div>
 		);

diff --git a/components/input/index.js b/components/input/index.js
@@ -6,6 +6,7 @@ export default class Input extends PureComponent {
 	static defaultProps = {
 		prefixCls: "cuke-input",
 		disabled: false,
+		readonly: false,
 		placeholder: "",
 		type: "text",
 		onChange: () => {}
@@ -15,6 +16,7 @@ export default class Input extends PureComponent {
 		prefixCls: PropTypes.string.isRequired,
 		placeholder: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
 		disabled: PropTypes.bool,
+		readonly: PropTypes.bool,
 		type: PropTypes.oneOf([
 			"text",
 			"password",
@@ -30,9 +32,7 @@ export default class Input extends PureComponent {
 	};
 
 	onChange = e => {
-		if (!this.props.disabled) {
-			this.props.onChange(e);
-		}
+		this.props.onChange(e);
 	};
 
 	render() {
@@ -42,22 +42,23 @@ export default class Input extends PureComponent {
 			prefixCls,
 			className,
 			disabled,
+			readonly,
 			addonBefore,
 			addonAfter,
 			...attr
 		} = this.props;
-		const isDisabled = disabled ? { disabled: true } : {};
 
 		const inputEle = (
 			<input
 				type={type}
+				disabled={disabled}
+				readOnly={readonly}
 				className={cls(prefixCls, className, {
 					[`${prefixCls}-disabled`]: disabled
 				})}
 				placeholder={placeholder}
 				onChange={this.onChange}
 				{...attr}
-				{...isDisabled}
 			/>
 		);
 

diff --git a/package.json b/package.json
@@ -26,7 +26,6 @@
     "build:doc": "build-storybook -c .storybook -o .out",
     "pub:doc": "yarn build:doc && storybook-to-ghpages --existing-output-dir=.out",
     "prepublish": "yarn build",
-    "prepush": "yarn pub:doc",
     "build": "yarn run clean && yarn build:lib && yarn build:umd && yarn build:css",
     "build:css": "cd scripts && gulp",
     "build:lib": "babel components -d lib",

diff --git a/stories/dataEntry.js b/stories/dataEntry.js
@@ -4,7 +4,6 @@ import { storiesOf } from '@storybook/react';
 import WordPadPage from './pages/wordPad';
 import RadioPage from './pages/radio';
 import Input from '../components/input';
-import Radio from '../components/radio';
 import { withInfo } from '@storybook/addon-info';
 import { IoIosAddCircleOutline } from 'react-icons/io';
 
@@ -73,9 +72,10 @@ storiesOf('数据录入', module)
 				<Input type="number" placeholder="请输入数字" />
 				<Input
 					placeholder="请输入"
-					defaultValue={'默认值'}
+					defaultValue="默认值"
 					style={{ margin: '10px 0' }}
 				/>
+				<Input readonly value="我是只读" style={{marginBottom:10}}/>
 				<Input disabled placeholder="禁用" />
 
 				<h2>前置/后置标签</h2>