@daoyi/nmtl-ui 2.0.1-beta.12 → 2.0.1-beta.121

package/lib/components/Input.js

@@ -1 +1,89 @@
-import e from"react";import n from"prop-types";import{c as t}from"./index-b2745105.js";import{OutlinedInput as r}from"@material-ui/core";import{s as a}from"./style-inject.es-1f59c1d0.js";a(".input {\n  padding: 12px; }\n");var s=function(n){var a=n.className,s=n.placeholder,o=n.defaultValue,l=n.value,i=n.type,u=n.onChange,p=n.onKeyPress,d=n.onPressEnter,f=n.suffix,c={inputProps:{className:t("input",a)},placeholder:s,defaultValue:o,onChange:function(e){var n=e.target;u&&u(n.value)},onKeyPress:function(e){"Enter"===e.key&&d&&d(e.key,e.target.value),p&&p(e)},value:l,endAdornment:f&&e.isValidElement(f)?f:null,type:i};return e.createElement(r,c)};s.defaultProps={className:void 0,placeholder:"Please enter text",defaultValue:void 0,value:void 0,onChange:void 0,onKeyPress:void 0,onPressEnter:void 0,suffix:null,type:"text"},s.propTypes={className:n.string,placeholder:n.string,defaultValue:n.string,value:n.string,onChange:n.func,onKeyPress:n.func,onPressEnter:n.func,suffix:n.node,type:n.string};export{s as default};
+import React__default from 'react';
+import PropTypes from 'prop-types';
+import { c as classNames } from './index-b76a85f4.js';
+import { OutlinedInput } from '@material-ui/core';
+import { s as styleInject } from './style-inject.es-1f59c1d0.js';
+
+var css_248z = ".input {\n  padding: 12px;\n}";
+styleInject(css_248z);
+
+var Input = function Input(props) {
+  var className = props.className,
+    placeholder = props.placeholder,
+    defaultValue = props.defaultValue,
+    value = props.value,
+    type = props.type,
+    error = props.error,
+    ariaLabel = props.ariaLabel; // Attributes
+
+  var _onChange = props.onChange,
+    _onKeyPress = props.onKeyPress,
+    onPressEnter = props.onPressEnter; // Call Back Functions
+
+  var suffix = props.suffix; // Dom Status
+
+  var OutlinedInputProps = {
+    /* WCAG 3.3.2（Freego HM1130104C）：placeholder 不是 label，包裹式 label 檢測工具也不認，
+       需要時由呼叫端傳 ariaLabel，直接標在 input 元素上 */
+    inputProps: {
+      className: classNames('input', className),
+      'aria-label': ariaLabel
+    },
+    placeholder: placeholder,
+    defaultValue: defaultValue,
+    onChange: function onChange(_ref) {
+      var target = _ref.target;
+      if (_onChange) _onChange(target.value);
+    },
+    onKeyPress: function onKeyPress(e) {
+      if (e.key === 'Enter' && onPressEnter) onPressEnter(e.key, e.target.value);
+      if (_onKeyPress) _onKeyPress(e);
+    },
+    value: value,
+    endAdornment: suffix && /*#__PURE__*/React__default.isValidElement(suffix) ? suffix : null,
+    type: type,
+    error: error
+  };
+  return /*#__PURE__*/React__default.createElement(OutlinedInput, OutlinedInputProps);
+};
+Input.defaultProps = {
+  className: undefined,
+  placeholder: 'Please enter text',
+  defaultValue: undefined,
+  value: undefined,
+  onChange: undefined,
+  onKeyPress: undefined,
+  onPressEnter: undefined,
+  suffix: null,
+  type: 'text',
+  error: false,
+  ariaLabel: undefined
+};
+
+/* Write props detail information and 'npm run updateStory' will help you generate stories's argTypes */
+Input.propTypes = {
+  /** Css Name */
+  className: PropTypes.string,
+  /** Placeholder */
+  placeholder: PropTypes.string,
+  /** Default Value */
+  defaultValue: PropTypes.string,
+  /** Value */
+  value: PropTypes.string,
+  /** onChange Call Back */
+  onChange: PropTypes.func,
+  /** onKeyPress Call Back */
+  onKeyPress: PropTypes.func,
+  /** onPressEnter Call Back */
+  onPressEnter: PropTypes.func,
+  /** Custom Icon Area */
+  suffix: PropTypes.node,
+  /** HTML5 Input type */
+  type: PropTypes.string,
+  /** Input error */
+  error: PropTypes.bool,
+  /** 無可見 label 時的可及名稱（WCAG 3.3.2）；會標在 input 元素上 */
+  ariaLabel: PropTypes.string
+};
+
+export { Input as default };