{"_id":"@bukku/antd-inline-edit","_rev":"3-959fd4f83c52753071a65d46d8f6044b","name":"@bukku/antd-inline-edit","dist-tags":{"latest":"1.2.11"},"versions":{"1.2.8":{"name":"@bukku/antd-inline-edit","version":"1.2.8","description":"An inline edit displays a custom input component that switches between reading and editing on the same page.","main":"dist/index.js","module":"dist/index.es.js","publishConfig":{"access":"public"},"scripts":{"test":"jest","coverage":"jest --coverage","storybook":"storybook dev -p 6006","build-storybook":"storybook build","rollup":"rollup -c --bundleConfigAsCjs","stylelint:css":"stylelint 'src/**/*.js'","stylelint:css-fix":"stylelint '**/*.js' --fix"},"keywords":["inline-edit","inline edit","antd","react","quick edit","editable input","div"],"author":{"name":"erictehyc"},"license":"MIT","devDependencies":{"@babel/preset-env":"^7.21.5","@babel/preset-react":"^7.18.6","@rollup/plugin-babel":"^6.0.3","@rollup/plugin-commonjs":"^24.1.0","@rollup/plugin-node-resolve":"^15.0.2","@rollup/plugin-terser":"^0.4.1","@storybook/addon-essentials":"^7.0.7","@storybook/addon-interactions":"^7.0.7","@storybook/addon-links":"^7.0.7","@storybook/blocks":"^7.0.7","@storybook/react":"^7.0.7","@storybook/react-webpack5":"^7.0.7","@storybook/testing-library":"^0.0.14-next.2","@testing-library/jest-dom":"^5.17.0","@testing-library/react":"^14.0.0","@testing-library/user-event":"^14.4.3","antd":"^5.4.6","babel-jest":"^29.5.0","eslint":"^8.39.0","eslint-config-airbnb":"^19.0.4","eslint-plugin-import":"^2.27.5","eslint-plugin-jest":"^27.2.1","eslint-plugin-jsx-a11y":"^6.7.1","eslint-plugin-react":"^7.32.2","eslint-plugin-react-hooks":"^4.6.0","jest":"^29.5.0","jest-environment-jsdom":"^29.5.0","jest-styled-components":"^7.1.1","postcss-styled-syntax":"^0.4.0","prop-types":"^15.8.1","react":"^18.2.0","react-dom":"^18.2.0","react-test-renderer":"^18.2.0","rollup":"^3.21.3","rollup-plugin-peer-deps-external":"^2.2.4","storybook":"^7.0.7","styled-components":"^5.3.10","stylelint":"^15.10.1","stylelint-config-recess-order":"^4.3.0","stylelint-config-standard":"^34.0.0"},"peerDependencies":{"antd":"^5.4.6","react":"^18.2.0","react-dom":"^18.2.0","styled-components":"^5.3.10"},"repository":{"type":"git","url":"git+https://github.com/bukku/antd-inline-edit.git"},"gitHead":"ecabf826e24c8569bc537d95db34367a0eaa7597","bugs":{"url":"https://github.com/bukku/antd-inline-edit/issues"},"homepage":"https://github.com/bukku/antd-inline-edit#readme","_id":"@bukku/antd-inline-edit@1.2.8","_nodeVersion":"18.9.0","_npmVersion":"8.19.1","dist":{"integrity":"sha512-zKT5UbWkllN6zy/W8zaRjXvURfysdukE0iGqOkoR2oNapiJjxWifhOMPEiG42wZLG/aAhXLCt4r7DS4BfCy22g==","shasum":"f6f02b1173752079c28a69116eda920c03e56202","tarball":"https://registry.npmjs.org/@bukku/antd-inline-edit/-/antd-inline-edit-1.2.8.tgz","fileCount":84,"unpackedSize":1348859,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCsuHVr0rpwlzeFnZPe+5L8FDBBoPj6eSVvpVFxOFJ4xAIgIq01Y0x+OcM0nqi5Eq8v5XH+kll4dZAvWexfkMWHxWY="}]},"_npmUser":{"name":"erictehyc","email":"eric_tyc@hotmail.com"},"directories":{},"maintainers":[{"name":"erictehyc","email":"eric_tyc@hotmail.com"},{"name":"jye_bukku","email":"jye@bukku.my"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/antd-inline-edit_1.2.8_1703142850114_0.9133401842043463"},"_hasShrinkwrap":false},"1.2.9":{"name":"@bukku/antd-inline-edit","version":"1.2.9","description":"An inline edit displays a custom input component that switches between reading and editing on the same page.","main":"dist/index.js","module":"dist/index.es.js","publishConfig":{"access":"public"},"scripts":{"test":"jest","coverage":"jest --coverage","storybook":"storybook dev -p 6006","build-storybook":"storybook build","rollup":"rollup -c --bundleConfigAsCjs","stylelint:css":"stylelint 'src/**/*.js'","stylelint:css-fix":"stylelint '**/*.js' --fix"},"keywords":["inline-edit","inline edit","antd","react","quick edit","editable input","div"],"author":{"name":"erictehyc"},"license":"MIT","devDependencies":{"@babel/preset-env":"^7.21.5","@babel/preset-react":"^7.18.6","@rollup/plugin-babel":"^6.0.3","@rollup/plugin-commonjs":"^24.1.0","@rollup/plugin-node-resolve":"^15.0.2","@rollup/plugin-terser":"^0.4.1","@storybook/addon-essentials":"^7.0.7","@storybook/addon-interactions":"^7.0.7","@storybook/addon-links":"^7.0.7","@storybook/blocks":"^7.0.7","@storybook/react":"^7.0.7","@storybook/react-webpack5":"^7.0.7","@storybook/testing-library":"^0.0.14-next.2","@testing-library/jest-dom":"^5.17.0","@testing-library/react":"^14.0.0","@testing-library/user-event":"^14.4.3","antd":"^5.4.6","babel-jest":"^29.5.0","eslint":"^8.39.0","eslint-config-airbnb":"^19.0.4","eslint-plugin-import":"^2.27.5","eslint-plugin-jest":"^27.2.1","eslint-plugin-jsx-a11y":"^6.7.1","eslint-plugin-react":"^7.32.2","eslint-plugin-react-hooks":"^4.6.0","jest":"^29.5.0","jest-environment-jsdom":"^29.5.0","jest-styled-components":"^7.1.1","postcss-styled-syntax":"^0.4.0","prop-types":"^15.8.1","react":"^18.2.0","react-dom":"^18.2.0","react-test-renderer":"^18.2.0","rollup":"^3.21.3","rollup-plugin-peer-deps-external":"^2.2.4","storybook":"^7.0.7","styled-components":"^5.3.10","stylelint":"^15.10.1","stylelint-config-recess-order":"^4.3.0","stylelint-config-standard":"^34.0.0"},"peerDependencies":{"antd":"^5.4.6","react":"^18.2.0","react-dom":"^18.2.0","styled-components":"^5.3.10"},"repository":{"type":"git","url":"git+https://github.com/bukku-accounting/antd-inline-edit.git"},"gitHead":"b2a9c285db51b62bff1fccd40493274acc638130","bugs":{"url":"https://github.com/bukku-accounting/antd-inline-edit/issues"},"homepage":"https://github.com/bukku-accounting/antd-inline-edit#readme","_id":"@bukku/antd-inline-edit@1.2.9","_nodeVersion":"18.9.0","_npmVersion":"8.19.1","dist":{"integrity":"sha512-+YAI44V9AGsPVsod7WL7azJCHgwAJDNJyaZ5Sk9FOa6+5Auy9+oyrMG9UEUkJh9ZQKAbcCrpnSqmUK+DdTteAA==","shasum":"4f6f77dfb9eca5d1db54519e07f1bb6311927462","tarball":"https://registry.npmjs.org/@bukku/antd-inline-edit/-/antd-inline-edit-1.2.9.tgz","fileCount":84,"unpackedSize":1348870,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAnrGTQ7EaWjLzPib0kMwutqigkrlJMBzwCbFm/5NNArAiAYMBAuXEUDFf/OAGAK+s57EL7QsSYEFeiRYV7PF+WShA=="}]},"_npmUser":{"name":"erictehyc","email":"eric_tyc@hotmail.com"},"directories":{},"maintainers":[{"name":"erictehyc","email":"eric_tyc@hotmail.com"},{"name":"jye_bukku","email":"jye@bukku.my"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/antd-inline-edit_1.2.9_1703143047615_0.23265417098470142"},"_hasShrinkwrap":false},"1.2.10":{"name":"@bukku/antd-inline-edit","version":"1.2.10","description":"An inline edit displays a custom input component that switches between reading and editing on the same page.","main":"dist/index.js","module":"dist/index.es.js","publishConfig":{"access":"public"},"scripts":{"test":"jest","coverage":"jest --coverage","storybook":"storybook dev -p 6006","build-storybook":"storybook build","rollup":"rollup -c --bundleConfigAsCjs","stylelint:css":"stylelint 'src/**/*.js'","stylelint:css-fix":"stylelint '**/*.js' --fix"},"keywords":["inline-edit","inline edit","antd","react","quick edit","editable input","div"],"author":{"name":"erictehyc"},"license":"MIT","devDependencies":{"@babel/preset-env":"^7.21.5","@babel/preset-react":"^7.18.6","@rollup/plugin-babel":"^6.0.3","@rollup/plugin-commonjs":"^24.1.0","@rollup/plugin-node-resolve":"^15.0.2","@rollup/plugin-terser":"^0.4.1","@storybook/addon-essentials":"^7.0.7","@storybook/addon-interactions":"^7.0.7","@storybook/addon-links":"^7.0.7","@storybook/blocks":"^7.0.7","@storybook/react":"^7.0.7","@storybook/react-webpack5":"^7.0.7","@storybook/testing-library":"^0.0.14-next.2","@testing-library/jest-dom":"^5.17.0","@testing-library/react":"^14.0.0","@testing-library/user-event":"^14.4.3","antd":"^5.4.6","babel-jest":"^29.5.0","eslint":"^8.39.0","eslint-config-airbnb":"^19.0.4","eslint-plugin-import":"^2.27.5","eslint-plugin-jest":"^27.2.1","eslint-plugin-jsx-a11y":"^6.7.1","eslint-plugin-react":"^7.32.2","eslint-plugin-react-hooks":"^4.6.0","jest":"^29.5.0","jest-environment-jsdom":"^29.5.0","jest-styled-components":"^7.1.1","postcss-styled-syntax":"^0.4.0","prop-types":"^15.8.1","react":"^18.2.0","react-dom":"^18.2.0","react-test-renderer":"^18.2.0","rollup":"^3.21.3","rollup-plugin-peer-deps-external":"^2.2.4","storybook":"^7.0.7","styled-components":"^5.3.10","stylelint":"^15.10.1","stylelint-config-recess-order":"^4.3.0","stylelint-config-standard":"^34.0.0"},"peerDependencies":{"antd":"^5.4.6","react":"^18.2.0","react-dom":"^18.2.0","styled-components":"^5.3.10"},"repository":{"type":"git","url":"git+https://github.com/bukku-accounting/antd-inline-edit.git"},"gitHead":"31451cff748dcd773d5cae3e5f427d0343a1dad3","bugs":{"url":"https://github.com/bukku-accounting/antd-inline-edit/issues"},"homepage":"https://github.com/bukku-accounting/antd-inline-edit#readme","_id":"@bukku/antd-inline-edit@1.2.10","_nodeVersion":"18.9.0","_npmVersion":"8.19.1","dist":{"integrity":"sha512-AZMSxLJwU0YBD69jMwbxMCqNGgHgy7RstWw/UpRR2pSz0WZLV7dWYOTWaDrbPNy+o4YMoZsaDURaq6mf23mE5g==","shasum":"4fdc4f957f42770cb811a898327d0256cfaf631b","tarball":"https://registry.npmjs.org/@bukku/antd-inline-edit/-/antd-inline-edit-1.2.10.tgz","fileCount":84,"unpackedSize":1349036,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIERcoCyPT2EPxcO9nWzsAzgejomxNvFUSrKvGwSPCnGWAiEAsPiyfkkPbNajlxjIzcPmf/a4y6kwlWfND4I1FUDBLi0="}]},"_npmUser":{"name":"erictehyc","email":"eric_tyc@hotmail.com"},"directories":{},"maintainers":[{"name":"erictehyc","email":"eric_tyc@hotmail.com"},{"name":"jye_bukku","email":"jye@bukku.my"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/antd-inline-edit_1.2.10_1703144565992_0.9435622876120058"},"_hasShrinkwrap":false},"1.2.11":{"name":"@bukku/antd-inline-edit","version":"1.2.11","description":"An inline edit displays a custom input component that switches between reading and editing on the same page.","main":"dist/index.js","module":"dist/index.es.js","publishConfig":{"access":"public"},"scripts":{"test":"jest","coverage":"jest --coverage","storybook":"storybook dev -p 6006","build-storybook":"storybook build","rollup":"rollup -c --bundleConfigAsCjs","stylelint:css":"stylelint 'src/**/*.js'","stylelint:css-fix":"stylelint '**/*.js' --fix"},"keywords":["inline-edit","inline edit","antd","react","quick edit","editable input","div"],"author":{"name":"erictehyc"},"license":"MIT","devDependencies":{"@babel/preset-env":"^7.21.5","@babel/preset-react":"^7.18.6","@rollup/plugin-babel":"^6.0.3","@rollup/plugin-commonjs":"^24.1.0","@rollup/plugin-node-resolve":"^15.0.2","@rollup/plugin-terser":"^0.4.1","@storybook/addon-essentials":"^7.0.7","@storybook/addon-interactions":"^7.0.7","@storybook/addon-links":"^7.0.7","@storybook/addon-onboarding":"^1.0.10","@storybook/blocks":"^7.0.7","@storybook/react":"^7.0.7","@storybook/react-vite":"^7.6.6","@storybook/react-webpack5":"^7.0.7","@storybook/test":"^7.6.6","@storybook/testing-library":"^0.0.14-next.2","@testing-library/jest-dom":"^5.17.0","@testing-library/react":"^14.0.0","@testing-library/user-event":"^14.4.3","antd":"^5.4.6","babel-jest":"^29.5.0","eslint":"^8.39.0","eslint-config-airbnb":"^19.0.4","eslint-plugin-import":"^2.27.5","eslint-plugin-jest":"^27.2.1","eslint-plugin-jsx-a11y":"^6.7.1","eslint-plugin-react":"^7.32.2","eslint-plugin-react-hooks":"^4.6.0","eslint-plugin-storybook":"^0.6.15","jest":"^29.5.0","jest-environment-jsdom":"^29.5.0","jest-styled-components":"^7.1.1","postcss-styled-syntax":"^0.4.0","prop-types":"^15.8.1","react":"^18.2.0","react-dom":"^18.2.0","react-test-renderer":"^18.2.0","rollup":"^3.21.3","rollup-plugin-peer-deps-external":"^2.2.4","storybook":"^7.0.7","styled-components":"^5.3.10","stylelint":"^15.10.1","stylelint-config-recess-order":"^4.3.0","stylelint-config-standard":"^34.0.0"},"peerDependencies":{"antd":"^5.4.6","react":"^18.2.0","react-dom":"^18.2.0","styled-components":"^5.3.10"},"repository":{"type":"git","url":"git+https://github.com/bukku-accounting/antd-inline-edit.git"},"gitHead":"2d63d8a2466558850b27f970ba755e29b0669e78","bugs":{"url":"https://github.com/bukku-accounting/antd-inline-edit/issues"},"homepage":"https://github.com/bukku-accounting/antd-inline-edit#readme","_id":"@bukku/antd-inline-edit@1.2.11","_nodeVersion":"18.9.0","_npmVersion":"8.19.1","dist":{"integrity":"sha512-jNlCBP0I2xK0gctykhlpMZj4Fb7T4dmPi+y6yk75mH6JR69Ly7qZeFtAg64fhXA0NWh5TMARZO2OhFZIkpW9Rg==","shasum":"7b24ab0c3351f0bed1d9384d4ea668aeb5ecc534","tarball":"https://registry.npmjs.org/@bukku/antd-inline-edit/-/antd-inline-edit-1.2.11.tgz","fileCount":84,"unpackedSize":1349170,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICQlaLqIOYEuv9kjn+NDgpSLwqe+CuE+aSisohm4cIsUAiBDHekR0ZF53tpuKDfeVKzmE3JV/WHuHbrKDzpMwqZSag=="}]},"_npmUser":{"name":"erictehyc","email":"eric_tyc@hotmail.com"},"directories":{},"maintainers":[{"name":"erictehyc","email":"eric_tyc@hotmail.com"},{"name":"jye_bukku","email":"jye@bukku.my"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/antd-inline-edit_1.2.11_1703750663924_0.4016726970439679"},"_hasShrinkwrap":false}},"time":{"created":"2023-12-21T07:14:10.008Z","1.2.8":"2023-12-21T07:14:10.356Z","modified":"2023-12-28T08:04:24.393Z","1.2.9":"2023-12-21T07:17:27.875Z","1.2.10":"2023-12-21T07:42:46.309Z","1.2.11":"2023-12-28T08:04:24.145Z"},"maintainers":[{"name":"erictehyc","email":"eric_tyc@hotmail.com"},{"name":"jye_bukku","email":"jye@bukku.my"}],"description":"An inline edit displays a custom input component that switches between reading and editing on the same page.","homepage":"https://github.com/bukku-accounting/antd-inline-edit#readme","keywords":["inline-edit","inline edit","antd","react","quick edit","editable input","div"],"repository":{"type":"git","url":"git+https://github.com/bukku-accounting/antd-inline-edit.git"},"author":{"name":"erictehyc"},"bugs":{"url":"https://github.com/bukku-accounting/antd-inline-edit/issues"},"license":"MIT","readme":"[![codecov](https://codecov.io/gh/erictehyc/antd-inline-edit/branch/main/graph/badge.svg?token=W68XTD9GN3)](https://codecov.io/gh/erictehyc/antd-inline-edit)\n[![Running Code Coverage](https://github.com/erictehyc/antd-inline-edit/actions/workflows/codecov.yml/badge.svg)](https://github.com/erictehyc/antd-inline-edit/actions/workflows/codecov.yml)\n[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)\n[![install size](https://packagephobia.com/badge?p=antd-inline-edit)](https://packagephobia.com/result?p=antd-inline-edit)\n\n![\"Antd Inline Edit\"](/public/images/antdInlineEditLogo.svg \"Antd Inline Edit\")\n![\"Antd Inline Edit Demo\"](/public/DemoGif.gif)\n\n# Antd Inline Edit\n\nIs it an input? Is it a div? It's both! 🤩\n\nAn inline edit displays a custom input component that switches between reading and editing on the same page.\n\nThe Antd Inline Edit component is a React component that provides an inline editing interface. \n\n\n## Installation\n\nYou can install the Antd Inline Edit component using npm:\n\n```bash\nnpm install @bukku/antd-inline-edit\n```\n\nor yarn:\n```bash\nyarn add @bukku/antd-inline-edit\n```\n\n## Usage\n\nTo use the Antd Inline Edit component in your project, you can import it like any other React component:\n\n```jsx\nimport React, { useState } from 'react';\nimport { Button } from 'antd';\nimport { InlineEdit } from 'antd-inline-edit';\n\nexport default function MyComponent() {\n  const valueWhenUndo = 'John Doe'\n  const [name, setName] = useState(valueWhenUndo);\n\n  const handleSave = (value) => {\n    setName(value);\n  };\n\n  return (\n    <div>\n      <h1>Profile</h1>\n      <InlineEdit \n        onSave={handleSave}\n        initialValue={name}\n        defaultValue={valueWhenUndo}\n        maxLength={50}\n      />\n    </div>\n  );\n}\n```\n\nIn this example, we're rendering an `InlineEdit` component and passing in a `value` prop and an `onSave` prop. When the user clicks on the component, it will switch to edit mode and allow the user to edit the value. When the user saves the changes, the `onSave` callback will be called with the new value.\n\n## Props\n\nThe Antd Inline Edit component accepts the following props:\n\n| Name | Description | Type | Default | Example |\n| ---- | ----------- | ---- | ------- | ------- |\n| onSave | Callback function that is called after the user has finished editing the input (either by pressing Enter or by blurring the input). | Function | `() => {}` | `value => console.log(value)` |\n| displayRenderer | Custom render function that is used to display the current value of the component. | Function | `undefined` | `value => <span>{value}</span>` |\n| initialValue | The initial value that is displayed in the component when it is first rendered. | String | `undefined` | `\"Hello, world!\"` |\n| defaultValue | The default value that is used if the user clicks the \"Undo\" button. | String | `undefined` | `\"John Doe\"` |\n| maxLength | The maximum number of characters that can be entered into the input field. | Number | `undefined` | `50` |\n| startWithEditViewOpen | whether to start with editable component open | Boolean | `false` | `true` |\n| inputComponent | The editable component rendered (`input` or `textarea`). | String | `input` | `textarea` |\n| textAreaProps | The props passed to the antd `textarea` component. Only valid when inputComponent is `textarea` | Object | `{}` | `{ autoSize: { minRows: 2, maxRows: 6 }}` |\n## License\n\nThis project is licensed under the MIT License - see the LICENSE file for details.\n\n## Contributing\n\nIf you'd like to contribute to the Antd Inline Edit component, please open an issue or pull request on the GitHub repository. We welcome all contributions and feedback!\n\n## Author\n\nThis package was created by [erictehyc](https://github.com/erictehyc).\n","readmeFilename":"README.md"}