Initial commit

Author: bebraw

.babelrc

@@ -0,0 +1,10 @@
+{
+  "presets": [
+    "es2015",
+    "react"
+  ],
+  "plugins": [
+    "syntax-object-rest-spread",
+    "transform-object-rest-spread"
+  ]
+}

.eslintignore

@@ -0,0 +1,7 @@
+packages/*/node_modules
+node_modules
+gh-pages
+dist
+build
+coverage
+

.eslintrc.js

@@ -0,0 +1,28 @@
+module.exports = {
+  "extends": "airbnb",
+  "parser": "babel-eslint",
+  "env": {
+    "browser": true,
+    "jasmine": true,
+    "node": true
+  },
+  "plugins": [
+    "react"
+  ],
+  "rules": {
+    "comma-dangle": ["error", "never"], // personal preference
+    "prefer-arrow-callback": 0, // mocha tests (recommendation)
+    "func-names": 0, // mocha tests (recommendation)
+    "import/extensions": 0, // skip import extensions
+    "import/no-extraneous-dependencies": 0, // monorepo setup
+    "import/no-unresolved": [1, { ignore: ['^reactabular'] }], // monorepo setup
+    "no-underscore-dangle": 0, // implementation detail (_highlights etc.)
+    "no-unused-expressions": 0, // chai
+    "no-use-before-define": 0, // personal preference
+    "react/forbid-prop-types": 0, // TODO: re-enable this later
+    "react/sort-comp": 0, // personal preference
+    "react/no-multi-comp": 0, // personal preference
+    "react/jsx-filename-extension": 0, // personal preference
+    "jsx-a11y/no-static-element-interactions": 0 // personal preference
+  }
+};

.gitignore

@@ -0,0 +1,5 @@
+node_modules/
+coverage/
+dist/
+.eslintcache
+

.travis.yml

@@ -0,0 +1,9 @@
+language: node_js
+node_js:
+  - "4"
+  - "5"
+  - "6"
+script:
+  - npm run test
+after_success:
+  - bash <(curl -s https://codecov.io/bash)

CHANGELOG.md

@@ -0,0 +1,40 @@
+6.1.0 / 2016-11-25
+==================
+
+  * The repository was moved to a new place. Functionality hasn't changed even though the version has been bumped for technical reasons.
+
+4.1.0 / 2016-09-20
+==================
+
+  * Feature - Pass `extraParameters` to `edit` interface. #201
+
+2.0.2 / 2016-08-17
+==================
+
+  * Feature - Allow value rendering to be customized. Now you can pass a custom renderer for value if the default (no visible value!) isn't enough.
+
+2.0.0 / 2016-08-16
+==================
+
+  * Breaking - Rename as `react-edit` given it's a generic component. It's not distributed as a part of `reactabular` anymore and you'll have to install it separately. #176.
+  * Breaking - Auto focus `input` by default. #180.
+
+1.2.1 / 2016-08-05
+==================
+
+  * Feature - Expose `event` to `onActivate`.
+
+1.1.6 / 2016-08-05
+==================
+
+  * Feature - Allow `activateEvent` (default `onClick`) to be overridden.
+
+1.1.0 / 2016-08-03
+==================
+
+  * Feature - Allow `editingProps` (`value`/`onValue`) to be overridden.
+
+1.0.0 / 2016-07-25
+==================
+
+  * Initial release.

LICENSE.md

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2016 Juho Vepsäläinen
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,136 @@
+# react-edit - Inline editing utilities for React
+
+`react-edit` provides a set of inline editing related utilities for React. The library comes with a couple of basic editors and you can implement your own as long as you follow the same interface (`value`, `onValue` props).
+
+## API
+
+The `edit` transform has been designed to allow inline editing. It expects you to define how to manipulate the state. it also expects you to pass an editor.
+
+**Example:**
+
+```jsx
+...
+import cloneDeep from 'lodash/cloneDeep';
+import findIndex from 'lodash/findIndex';
+import * as edit from 'react-edit';
+
+...
+
+// Define how to manipulate rows through edit.
+const editable = edit.edit({
+  // Determine whether the current cell is being edited or not.
+  isEditing: ({ columnIndex, rowData }) => columnIndex === rowData.editing,
+
+  // The user requested activation, mark the current cell as edited.
+  // IMPORTANT! If you stash the rows at this.state.rows, DON'T
+  // mutate it as that will break Table.Body optimization check.
+  //
+  // You also have access to `event` here.
+  onActivate: ({ columnIndex, rowData, event }) => {
+    event.stopPropagation();
+
+    const index = findIndex(this.state.rows, { id: rowData.id });
+    const rows = cloneDeep(this.state.rows);
+
+    rows[index].editing = columnIndex;
+
+    this.setState({ rows });
+  },
+
+  // Capture the value when the user has finished and update
+  // application state.
+  onValue: ({ value, rowData, property }) => {
+    const index = findIndex(this.state.rows, { id: rowData.id });
+    const rows = cloneDeep(this.state.rows);
+
+    rows[index][property] = value;
+    rows[index].editing = false;
+
+    this.setState({ rows });
+  },
+
+  // It's possible to shape the value passed to the editor. See
+  // the Excel example for a concrete example.
+  // getEditedValue: v => v.value
+
+  // If you want to change default value/onValue, you can do it through
+  // editingProps: { value: 'value', onValue: 'onValue' }
+
+  // In case you want to trigger activation using something else than
+  // onClick, adjust it like this:
+  // activateEvent: 'onDoubleClick'
+});
+
+...
+
+// Wrap within an element and render.
+React.createElement('div', editable(edit.input())(
+  value, { columnIndex, rowData }, { ... custom props ... }
+), (value, extraParameters, props) => ({
+  children: <div>{value}</div>
+}));
+
+// Or in JSX
+<div {...editable(edit.input())(...)} />
+```
+
+## Editing Interface
+
+An editor should follow the following interface:
+
+* `({ value, onValue, extraParameters }) => <React element>`
+
+It will receive the current `value` and is expected to emit the result through `onValue` upon completion. You can capture row data, property name, and such through `extraParameters`.
+
+## Editors
+
+`react-edit` provides a few editors by default:
+
+* `edit.boolean({ props: <props> })` - If the initial value is true, allows setting to false and vice versa. Demo value defaults to false always
+* `edit.dropdown({ options: [[<value>, <name>]], props: <props> })` - The dropdown expects an array of value-name object pairs and emits the selected one.
+* `edit.input({ props: <props> })` - A wrapper for a regular input.
+
+## Writing a Custom Editor
+
+If you want to implement a custom editor, you should accept `value` and `onValue` prop pair. The former will contain the current value and `onValue` should return a new one. It can be convenient to curry your editor so that you can pass custom `props` to it easily. Consider the following example.
+
+```jsx
+/*
+import React from 'react';
+*/
+
+const boolean = ({ props } = {}) => {
+  const Boolean = ({ value, onValue }) => (
+    <div {...props}>
+      <button
+        disabled={value}
+        onClick={() => onValue(true)}
+      >&#10003;
+      </button>
+      <button
+        disabled={!value}
+        onClick={() => onValue(false)}
+      >&#10007;
+      </button>
+    </div>
+  );
+  Boolean.propTypes = {
+    value: React.PropTypes.any,
+    onClick: React.PropTypes.func,
+    onValue: React.PropTypes.func
+  };
+
+  return Boolean;
+};
+
+const Boolean = boolean({ style: {
+  backgroundColor: '#ddd'
+}});
+
+<Boolean value onValue={v => alert(`You chose ${v}`)} />
+```
+
+## License
+
+MIT. See LICENSE for details.
+

__tests__/boolean-test.js

@@ -0,0 +1,94 @@
+/* eslint-disable react/prop-types */
+import React from 'react';
+import TestUtils from 'react-addons-test-utils';
+import { boolean } from '../src';
+
+describe('edit.boolean', function () {
+  it('renders given value', function () {
+    const testValue = false;
+    const Boolean = boolean();
+    const result = TestUtils.renderIntoDocument(
+      <Wrapper>
+        <Boolean value={testValue} onValue={() => {}} />
+      </Wrapper>
+    );
+
+    const renderedButtons = TestUtils.scryRenderedDOMComponentsWithTag(
+      result, 'button'
+    );
+
+    expect(renderedButtons.length).toEqual(2);
+    expect(renderedButtons[0].disabled).toEqual(testValue);
+    expect(renderedButtons[1].disabled).toEqual(!testValue);
+  });
+
+  it('triggers onValue when value is false', function () {
+    let changedValue = false;
+    const Boolean = boolean();
+    const result = TestUtils.renderIntoDocument(
+      <Wrapper>
+        <Boolean
+          value={false}
+          onValue={() => {
+            changedValue = true;
+          }}
+        />
+      </Wrapper>
+    );
+
+    const renderedButtons = TestUtils.scryRenderedDOMComponentsWithTag(
+      result, 'button'
+    );
+
+    TestUtils.Simulate.click(renderedButtons[0]);
+
+    expect(changedValue).toEqual(true);
+  });
+
+  it('triggers onValue when value is true', function () {
+    let changedValue = false;
+    const Boolean = boolean();
+    const result = TestUtils.renderIntoDocument(
+      <Wrapper>
+        <Boolean
+          value
+          onValue={() => {
+            changedValue = false;
+          }}
+        />
+      </Wrapper>
+    );
+
+    const renderedButtons = TestUtils.scryRenderedDOMComponentsWithTag(
+      result, 'button'
+    );
+
+    TestUtils.Simulate.click(renderedButtons[1]);
+
+    expect(changedValue).toEqual(false);
+  });
+
+  it('accepts custom props', function () {
+    const testClassName = 'demo';
+    const Boolean = boolean({
+      props: { className: testClassName }
+    });
+    const result = TestUtils.renderIntoDocument(
+      <Wrapper>
+        <Boolean value={'name'} onValue={() => {}} />
+      </Wrapper>
+    );
+
+    const renderedDiv = TestUtils.findRenderedDOMComponentWithClass(
+      result, testClassName
+    );
+
+    expect(renderedDiv).toBeDefined();
+  });
+});
+
+class Wrapper extends React.Component { // eslint-disable-line max-len, react/prefer-stateless-function
+  render() {
+    return <div>{this.props.children}</div>;
+  }
+}