react-thailand-address-input 1.1.0

package/dist/AddressTypeahead.component.js

@@ -0,0 +1,82 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _recompose = require('recompose');
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _Typeahead = require('./Typeahead.component');
+
+var _Typeahead2 = _interopRequireDefault(_Typeahead);
+
+var _finder = require('./finder');
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var AddressTypeaheadComponent = function AddressTypeaheadComponent(props) {
+  var searchStr = props.searchStr,
+      setSearchStr = props.setSearchStr,
+      fieldType = props.fieldType,
+      options = props.options,
+      className = props.className,
+      placeholder = props.placeholder,
+      maxVisible = props.maxVisible;
+
+  if (!fieldType) {
+    console.warn('No field type provide');
+    return _react2.default.createElement('div', null);
+  }
+  return _react2.default.createElement(_Typeahead2.default, {
+    displayOption: props.renderResult,
+    filterOption: fieldType,
+    className: className,
+    placeholder: placeholder,
+    options: options,
+    maxVisible: maxVisible,
+    value: searchStr,
+    onChange: function onChange(e) {
+      return setSearchStr(e.target.value);
+    },
+    onOptionSelected: function onOptionSelected(option) {
+      return props.onOptionSelected(option);
+    }
+  });
+};
+
+var AddressTypeahead = (0, _recompose.compose)((0, _recompose.withState)('searchStr', 'setSearchStr', function (_ref) {
+  var value = _ref.value;
+  return value;
+}), (0, _recompose.lifecycle)({
+  componentWillReceiveProps: function componentWillReceiveProps(nextProps) {
+    if (nextProps.value !== this.props.value) {
+      this.props.setSearchStr(nextProps.value);
+    }
+  }
+}), (0, _recompose.withProps)(function (_ref2) {
+  var searchStr = _ref2.searchStr,
+      fieldType = _ref2.fieldType;
+  return {
+    options: (0, _finder.resolveResultbyField)(fieldType, searchStr)
+  };
+}), (0, _recompose.defaultProps)({
+  renderResult: function renderResult(data) {
+    return _react2.default.createElement(
+      'span',
+      null,
+      data.d + ' \xBB ' + data.a + ' \xBB ' + data.p + ' \xBB ',
+      data.z || _react2.default.createElement(
+        'li',
+        null,
+        'ไม่มีรหัสไปรษณีย์'
+      )
+    );
+  },
+  value: ''
+}))(AddressTypeaheadComponent);
+
+exports.default = AddressTypeahead;

package/dist/Typeahead.component.js

@@ -0,0 +1,66 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _recompose = require('recompose');
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var Typeahead = (0, _recompose.compose)((0, _recompose.defaultProps)({
+  onChange: function onChange() {},
+  option: [],
+  maxVisible: 10
+}), (0, _recompose.withState)('open', 'setOpen', false))(function (props) {
+  return _react2.default.createElement(
+    'div',
+    { className: 'typeahead typeahead-input-wrap' },
+    _react2.default.createElement('input', {
+      onBlur: function onBlur() {
+        return setTimeout(function () {
+          return props.setOpen(false);
+        }, 400);
+      },
+      onFocus: function onFocus() {
+        return props.setOpen(true);
+      },
+      type: 'text', value: props.value,
+      placeholder: props.placeholder,
+      onChange: props.onChange,
+      className: props.className
+    }),
+    props.options.length && props.value.length ? _react2.default.createElement('input', {
+      onChange: function onChange() {
+        return null;
+      },
+      value: props.options[0][props.filterOption],
+      type: 'text', className: 'typeahead-input-hint'
+    }) : null,
+    props.open && props.options.length && props.value.length ? _react2.default.createElement(
+      'ul',
+      { className: 'typeahead-selector' },
+      props.options.filter(function (item, i) {
+        return i < props.maxVisible;
+      }).map(function (item, i) {
+        return _react2.default.createElement(
+          'li',
+          {
+            key: i,
+            onClick: function onClick() {
+              props.onOptionSelected(item);
+              props.setOpen(false);
+            }
+          },
+          props.displayOption(item)
+        );
+      })
+    ) : null
+  );
+});
+
+exports.default = Typeahead;

package/dist/finder.js

@@ -0,0 +1,59 @@
+'use strict';
+
+var JQL = require('jqljs');
+
+var fieldsEnum = {
+  DISTRICT: 'd',
+  AMPHOE: 'a',
+  PROVINCE: 'p',
+  ZIPCODE: 'z'
+};
+
+/**
+ * From jquery.Thailand.js line 30 - 128
+ * Search result by FieldsType
+ */
+var preprocess = function preprocess(data) {
+  if (!data[0].length) {
+    // non-compacted database
+    return data;
+  }
+  // compacted database in hierarchical form of:
+  // [["province",[["amphur",[["district",["zip"...]]...]]...]]...]
+  var expanded = [];
+  data.forEach(function (provinceEntry) {
+    var province = provinceEntry[0];
+    var amphurList = provinceEntry[1];
+    amphurList.forEach(function (amphurEntry) {
+      var amphur = amphurEntry[0];
+      var districtList = amphurEntry[1];
+      districtList.forEach(function (districtEntry) {
+        var district = districtEntry[0];
+        var zipCodeList = districtEntry[1];
+        zipCodeList.forEach(function (zipCode) {
+          expanded.push({
+            d: district,
+            a: amphur,
+            p: province,
+            z: zipCode
+          });
+        });
+      });
+    });
+  });
+  return expanded;
+};
+var DB = new JQL(preprocess(require('../data.json')));
+
+var resolveResultbyField = function resolveResultbyField(type, searchStr) {
+  var possibles = [];
+  try {
+    possibles = DB.select('*').where(type).match('^' + searchStr).orderBy(type).fetch();
+  } catch (e) {
+    return [];
+  }
+  return possibles;
+};
+
+exports.resolveResultbyField = resolveResultbyField;
+exports.fieldsEnum = fieldsEnum;

package/dist/index.js

@@ -0,0 +1,104 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _finder = require('./finder');
+
+var _AddressTypeahead = require('./AddressTypeahead.component');
+
+var _AddressTypeahead2 = _interopRequireDefault(_AddressTypeahead);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+var AddressForm = function (_React$Component) {
+  _inherits(AddressForm, _React$Component);
+
+  function AddressForm(props) {
+    _classCallCheck(this, AddressForm);
+
+    var _this = _possibleConstructorReturn(this, (AddressForm.__proto__ || Object.getPrototypeOf(AddressForm)).call(this, props));
+
+    _this.state = {
+      addressObj: props.values
+    };
+    _this.setAddressObj = _this.setAddressObj.bind(_this);
+    return _this;
+  }
+
+  _createClass(AddressForm, [{
+    key: 'setAddressObj',
+    value: function setAddressObj(addressObj) {
+      this.setState({ addressObj: addressObj });
+    }
+  }, {
+    key: 'render',
+    value: function render() {
+      var _this2 = this;
+
+      var addressObj = this.state.addressObj;
+
+      return _react2.default.createElement(
+        'div',
+        null,
+        Object.keys(_finder.fieldsEnum).map(function (key) {
+          var name = void 0;
+          switch (_finder.fieldsEnum[key]) {
+            case 'd':
+              name = 'ตำบล';break;
+            case 'a':
+              name = 'อำเภอ';break;
+            case 'p':
+              name = 'จังหวัด';break;
+            case 'z':
+              name = 'รหัสไปรษณีย์';break;
+            default:
+              name = '';break;
+          }
+          return _react2.default.createElement(
+            'div',
+            { key: key, className: 'typeahead-address-container' },
+            _this2.props.showLabel ? _react2.default.createElement(
+              'label',
+              { className: 'typeahead-address-label', htmlFor: 'district' },
+              name
+            ) : _react2.default.createElement('label', null),
+            _react2.default.createElement(_AddressTypeahead2.default, {
+              className: _this2.props.classNameInput,
+              placeholder: _this2.props.placeholder ? _this2.props.placeholder[_finder.fieldsEnum[key]] || '' : '',
+              renderResult: _this2.props.renderResult,
+              maxVisible: _this2.props.maxVisible,
+              onOptionSelected: function onOptionSelected(result) {
+                _this2.setAddressObj(result);
+                _this2.props.onAddressSelected(result);
+              },
+              value: addressObj ? addressObj[_finder.fieldsEnum[key]] : '',
+              fieldType: _finder.fieldsEnum[key]
+            })
+          );
+        })
+      );
+    }
+  }]);
+
+  return AddressForm;
+}(_react2.default.Component);
+
+AddressForm.defaultProps = {
+  maxVisible: 20
+};
+
+exports.default = AddressForm;

package/dist/styles.css

@@ -0,0 +1,49 @@
+.typeahead-input-wrap {
+    position: relative;
+    width: 100%;
+}
+.typeahead input[type="text"], .typeahead-input-hint{
+    width: 100%;
+    box-sizing: border-box;
+    background: #fff;
+    color: #666;
+    border: 1px solid #e5e5e5;
+    padding: 8px 6px;
+    transition: 0.2s ease-in-out;
+    font-size: 16px;
+    transition-property: color, background-color, border;
+}
+.typeahead input[type="text"]:focus {
+    border-color: #1e87f0;
+    outline: none;
+}
+
+.typeahead-selector{
+    width: 100%;
+    border: 1px solid #eee;
+    border-top: none;
+}
+.typeahead ul {
+    padding: 0;
+    margin: 0;
+}
+.typeahead-selector li {
+    padding: 10px 5px;
+    background: #fff;
+    border-bottom: 1px solid #eee;
+    cursor: pointer;
+}
+.tt-cursor,
+.typeahead-selector li:hover{
+    background: #f5f5f5;
+}
+.typeahead-input-hint {
+    opacity: 0.3 !important;
+    position: absolute;
+    width: 100%;
+    border: 1px solid rgba(0,0,0,0);
+    top:0;
+    left:0;
+    user-select: none;
+    pointer-events: none;
+}

package/example/TestProps.js

@@ -0,0 +1,38 @@
+import React, { Component } from 'react';
+import AddressForm from '../src/index';
+
+class TestProps extends Component {
+  constructor(props) {
+    super(props);
+
+    this.onClick = this.onClick.bind(this);
+
+    this.state = {
+      address: { d: 'd', a: 'a', p: 'p', z: 123, }
+    }
+  }
+
+
+  onClick() {
+    const { address } = this.state;
+    address.d = "123666"
+    this.setState({
+      address: { }
+    })
+  }
+
+  render() {
+    const { address } = this.state;
+    return (
+      <div style={{ width: 400 }}>
+        <AddressForm
+          showLabel
+          maxVisible={40}
+          values={address}
+        />
+        <button onClick={this.onClick}>button</button>
+      </div>
+    );
+  }
+}
+export default TestProps;

package/example/index.js

@@ -0,0 +1,78 @@
+import React from 'react';
+import { storiesOf, action } from '@kadira/storybook';
+import { withState } from 'recompose';
+import AddressForm from '../src/index';
+
+import '../src/styles.css';
+import TestProps from './TestProps';
+
+storiesOf('Component', module)
+  .add('montage', () => (
+    <div style={{ width: 350 }}>
+      <AddressForm onAddressSelected={action('onSelectedAdress')} />
+      <code>{'<AddressForm onAddressSelected={action(\'onSelectedAdress\')} />'}</code>
+    </div>
+  ))
+  .add('handle result', () => {
+    const WithStateComponent = withState('result', 'setResult', null)(({ result, setResult }) => (
+      <div style={{ width: 350 }}>
+        <div>
+          selected : {result ? `${result.p} ${result.a} ${result.d} ${result.z}` : null}
+        </div>
+        <AddressForm onAddressSelected={address => setResult(address)} />
+      </div>
+    ));
+    return (<div>
+      <WithStateComponent />
+      <code>
+        {`
+         <div style={{ width: 350 }}>
+          <div>
+            selected : {result ? \`\${result.p} \${result.a} \${result.d} \${result.z}\` : null}
+          </div>
+          <AddressForm onAddressSelected={address => setResult(address)} />
+        </div>
+        `}
+      </code>
+    </div>);
+  })
+  .add('custom render result', () => (
+    <TestProps />
+  ))
+  .add('custom initial', () => (
+    <div style={{ width: 350 }}>
+      <AddressForm
+        onAddressSelected={action('onSelectedAdress')}
+        values={{
+          d: "ฟากท่า", a: "ฟากท่า", p: "อุตรดิตถ์", z: 53161
+        }}
+      />
+      <code>{'<AddressForm onAddressSelected={action(\'onSelectedAdress\')} />'}</code>
+    </div>
+  ))
+  .add('show label', () => (
+    <div style={{ width: 350 }}>
+      <AddressForm
+        showLabel
+        onAddressSelected={action('onSelectedAdress')}
+        values={{
+          d: "ฟากท่า", a: "ฟากท่า", p: "อุตรดิตถ์", z: 53161
+        }}
+      />
+      <code>{'<AddressForm onAddressSelected={action(\'onSelectedAdress\')} />'}</code>
+    </div>
+  ))
+  .add('maxVisible', () => (
+    <div style={{ width: 350 }}>
+      <AddressForm
+        showLabel
+        maxVisible={40}
+        onAddressSelected={action('onSelectedAdress')}
+        values={{
+          d: "ฟากท่า", a: "ฟากท่า", p: "อุตรดิตถ์", z: 53160
+        }}
+      />
+      <code>{'<AddressForm onAddressSelected={action(\'onSelectedAdress\')} />'}</code>
+    </div>
+  ));
+

package/package.json

@@ -0,0 +1,68 @@
+{
+  "name": "react-thailand-address-input",
+  "version": "1.1.0",
+  "main": "dist/index.js",
+  "repository": {
+    "url": "git@github.com:sangzn34/react-thailand-address-input.git",
+    "type": "git"
+  },
+  "scripts": {
+    "commit": "git-cz",
+    "release": "npm run build && standard-version",
+    "test": "jest",
+    "build": "babel src --out-dir dist --copy-files",
+    "webpack": "webpack",
+    "storybook": "start-storybook -p 9001 -c .storybook",
+    "export": "build-storybook -c .storybook -o .out"
+  },
+  "author": "Rungsikorn Rungsikavarnich <rungsikorn@me.com>",
+  "license": "MIT",
+  "devDependencies": {
+    "@kadira/storybook": "^2.35.3",
+    "babel-cli": "^6.24.1",
+    "babel-eslint": "^7.2.1",
+    "babel-loader": "^6.4.1",
+    "babel-plugin-transform-flow-strip-types": "^6.22.0",
+    "babel-preset-es2015": "^6.24.1",
+    "babel-preset-react": "^6.24.1",
+    "babili-webpack-plugin": "^0.0.11",
+    "commitizen": "^2.9.6",
+    "css-loader": "^0.28.0",
+    "cz-conventional-changelog": "^2.0.0",
+    "eslint": "^3.19.0",
+    "eslint-config-airbnb": "^14.1.0",
+    "eslint-config-clogii": "^1.0.1",
+    "eslint-plugin-flow-vars": "^0.5.0",
+    "eslint-plugin-flowtype": "^2.30.4",
+    "eslint-plugin-import": "^2.2.0",
+    "eslint-plugin-jsx-a11y": "^4.0.0",
+    "eslint-plugin-react": "^6.10.3",
+    "flow-remove-types": "^1.2.0",
+    "jest": "^19.0.2",
+    "json-loader": "^0.5.4",
+    "next": "^2.1.0",
+    "standard-version": "^4.0.0",
+    "style-loader": "^0.16.1",
+    "webpack": "^2.3.3",
+    "react": "15.4.0",
+    "react-dom": "15.5.3"
+  },
+  "config": {
+    "commitizen": {
+      "path": "./node_modules/cz-conventional-changelog"
+    }
+  },
+  "jest": {
+    "transform": {
+      "\\.js$": "./__test__/flow-type-strip.register.js"
+    }
+  },
+  "peerDependencies": {
+    "react": "15.4.0",
+    "react-dom": "15.5.3"
+  },
+  "dependencies": {
+    "jqljs": "^0.3.2",
+    "recompose": "0.23.0"
+  }
+}