{"_id":"@adactiveasia/adsm-steplist","_rev":"1-0f41e1836c93c1e75fe33ec0923ee158","name":"@adactiveasia/adsm-steplist","dist-tags":{"latest":"0.0.5"},"versions":{"0.0.5":{"name":"@adactiveasia/adsm-steplist","version":"0.0.5","description":"Adsum Steplist Component","main":"index.js","author":"","license":"UNLISENCED","repository":{"type":"git","url":"git://github.com/adactiveasia/adsum-react-components.git"},"bugs":{"url":"https://github.com/adactiveasia/adsum-react-components.git/issues"},"scripts":{},"dependencies":{"chalk":"^1.1.3","commander":"^2.9.0","prex-es5":"^0.4.2"},"publishConfig":{"access":"public"},"keywords":["adsum","react","redux"],"bin":{"arc-steplist":"cli.js"},"homepage":"https://github.com/adactiveasia/adsum-react-components#readme","_id":"@adactiveasia/adsm-steplist@0.0.5","_nodeVersion":"8.17.0","_npmVersion":"6.13.4","dist":{"integrity":"sha512-z4tCOeLyvgdKlrgfxxYDN08ICxeKp/jqzvdA/rd09/TXEEJkHpt0lS+rITzWcguDQQA6yLZpexWHtyxheKDx0g==","shasum":"6c08220de880082c9a6d4a129d53c5d16f08e458","tarball":"https://registry.npmjs.org/@adactiveasia/adsm-steplist/-/adsm-steplist-0.0.5.tgz","fileCount":14,"unpackedSize":27020,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe/WHDCRA9TVsSAnZWagAAny8P/2PEkcpRlyXtFyTC1HRz\nPCIaMCF7TdHfEz+rgdPCpn3xJFkJbd4HSlhsWZGJDyOIjSsngtkagkmSN0Fc\n3b+Vl2oiqo2EYrqE2uRlM9kXz6Vel/F6QnEgKSky2VnvpoVqVplH/keamg4m\n9b8HgWV7/8ufGUlgNffinETvxMw62VODW1k5pgfQ43W8Qkn0O6ZBsD02do0f\ncof7n6+rPfh8kpCcm4Ru3PnwWEStHa0f4CLMpzTBIgVJWaqSq7O5BupNb0D2\nSAGAdsR2OYZghz82fl+T9asr6udxrNuI2K2GmRLk1JDkKWiDb72287hVwE3Q\ngVMSl6FeePM0haoXopHBtnA2jbBW/cCbA+kQLq5r8aUd0D2WDE3ZMSOQc1ZV\n5X7W40jL+t6KXormQ3byw8QQ+Rs1ZRG5bNMKNmHbFmRHud67TRciZssghtWy\nDNduM3YqZ1/IrDobTLzrkbdlXMrQN1PlIYDbZIQKMq510hfwF9LOx/+m3GYi\nY+VWEM9s7UGrZgk7/g+CDo73PTNjf0zuvG5xLgxObVNihQxdEDp/i8+9uCFt\nokg+5+v4YgZaxZCFvsEfD66vojweMEMwy6QrXAFaX84JZMfKEjvDgJdunK0E\nbwEkPMajboIb4ej1XZTI01JHlGOnrlO6QmzwFpcXNF7BNy38dSZq1R6Wb1PR\nSq1u\r\n=YM96\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBnPsgDN1jvtlZYlGmOADoCmEZIvaPin5vkGpZv83HExAiEAyFk0+W2lTFpSeBLI2H2sE9h3BCLrlkXDm9L4nv+4E4I="}]},"maintainers":[{"name":"devadactiveasia","email":"dev@adactive.asia"}],"_npmUser":{"name":"devadactiveasia","email":"dev@adactive.asia"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/adsm-steplist_0.0.5_1593663938770_0.7037340180210221"},"_hasShrinkwrap":false}},"time":{"created":"2020-07-02T04:25:38.559Z","0.0.5":"2020-07-02T04:25:38.882Z","modified":"2022-04-04T11:22:41.018Z"},"maintainers":[{"name":"devadactiveasia","email":"dev@adactive.asia"}],"description":"Adsum Steplist Component","homepage":"https://github.com/adactiveasia/adsum-react-components#readme","keywords":["adsum","react","redux"],"repository":{"type":"git","url":"git://github.com/adactiveasia/adsum-react-components.git"},"bugs":{"url":"https://github.com/adactiveasia/adsum-react-components.git/issues"},"license":"UNLISENCED","readme":"![react-badge](https://img.shields.io/badge/react-js-53c1de.svg?style=flat)\n![touch-badge](https://img.shields.io/badge/for-touch--screen-ff69b4.svg?style=flat)\n\n# Step List\n\n![Screenshot of Step List component](\nhttps://user-images.githubusercontent.com/24209524/49843968-01e26400-fdfc-11e8-85d6-0433036a44d0.png\n)\n\n## Getting started\n\n    npm i --save @adactive/arc-steplist\n\nOR\n\n    yarn add @adactive/arc-steplist\n\n## How to use\n\nJust add the component as below:\n\n```js\n\nimport * as React from 'react';\n\n// import StepList component\nimport StepList from '@adactive/arc-steplist';\n\n/*...*/\n\nclass MyComponent extends React.Component {\n    render() {\n        return (\n            <StepList placeId={placeId} />\n        );\n    }\n}\n\n```\n\n## Props\n\n```js\n\ntype OwnPropsType = {|\n    placeId: ?number,\n    pmr: boolean, // optional\n    messages: MessagesType, // optional\n    stepStyle: StepStyleType, // optional\n    renderStep: RenderStepType, // optional\n    renderStepTail: RenderStepTailType, // optional\n|};\n\n```\n\n>You can see here as well what flow types are exported. You can import them from the component to\nenhance your flow typing in your app.\n\n```js\n\nexport type StepType = {|\n    index: number,\n    floor: ?{|\n        id: number,\n        name: ?string,\n        deltaAltitudeWithPrevStep: number,\n    |},\n    message: string,\n|};\n\nexport type MessagesType = (step: StepType) => {|\n    firstStep?: string,\n    lastStep?: string,\n    isInterfloor?: string,\n    default?: string,\n|};\n\nexport type StepStyleType = {|\n    default?: { [key: string]: string},\n    isDone?: { [key: string]: string},\n    current?: { [key: string]: string},\n    isNext?: { [key: string]: string},\n    isNotDoneYet?: { [key: string]: string},\n|};\n\nexport type RenderStepType = (\n    mode: StepModeType,\n    step: StepType,\n    stepStyle: StepStyleType,\n    onClick: (stepIndex: number) => () => void,\n) => ?Node;\n\nexport type RenderStepTailType = (mode: StepModeType, step: StepType) => ?Node;\n\n```\n\n### placeId\nPlace ID of the place targeted by the steplist. This is the only necessary prop of the component.\n    \n### pmr\nDraw the wayfinding with PMR (avoid stairs, use elevator instead) or not.\n\n##### default value\n```js\n\ndefaultPmr = false\n\n```\n\n### messages\nCustomize message shown on each step, following this structure:\n\n```js\n\ntype MessagesType = (step: StepType) => {|\n    firstStep?: string,\n    lastStep?: string,\n    isInterfloor?: string,\n    default?: string,\n|};\n\n```\n\n- **firstStep**: the first step.\n- **lastStep**: the last step.\n- **isInterfloor**: steps where the floor is different from the previous one.\n- **default**: message for steps that don't fall into any of the previous categories.\n\n##### default value\n```js\n\ndefaultMessages = (step: StepType) => {\n    const { floor } = step;\n\n    let floorName = null;\n    let upOrDown = '';\n\n    if (floor) {\n        const { name, deltaAltitudeWithPrevStep } = floor;\n\n        // floor name\n        floorName = name;\n\n        // interfloor direction\n        if (deltaAltitudeWithPrevStep > 0) upOrDown = ' up'; // space before on purpose\n        else if (deltaAltitudeWithPrevStep < 0) upOrDown = ' down'; // same\n    }\n\n    return {\n        firstStep: `Start here${floorName ? `, at ${floorName}` : ''}`,\n        lastStep: 'You are at your destination',\n        isInterfloor: floorName ? `Go${upOrDown} to ${floorName}` : 'Change floor',\n        default: 'Continue',\n    };\n}\n\n```\n\n### stepStyle\nCustomize style of each step, following this structure:\n\n```js\n\nexport type StepStyleType = {|\n    default?: CSSStyleDeclaration,\n    isDone?: CSSStyleDeclaration,\n    current?: CSSStyleDeclaration,\n    isNext?: CSSStyleDeclaration,\n    isNotDoneYet?: CSSStyleDeclaration,\n|};\n\n```\n\n- **default**: style applied to each step, whatever their current mode.\n- **isDone**: style added to step that are done.\n- **current**: style added to current step.\n- **isNext**: style added to the step just after the current step.\n- **isNotDoneYet**: style added to the steps that are after the 'isNext' step, not done yet.\n\n>Be aware that you don't have to modify all the styles. For examples, you can modify only the\n'isNext' style, and the others default styles will be kept.\n\nIf you want to modify the style of the whole step list, you can overwrite the **'steplist'**\nclassname in your component stylesheet.\n\n##### default value\n```js\n\ndefaultStepStyle = {\n    default: {\n        transition: 'all .5s',\n    },\n    isDone: {\n        opacity: 0.3,\n    },\n    current: {\n        backgroundColor: 'green',\n    },\n    isNext: {\n        backgroundColor: 'lightgreen',\n    },\n    isNotDoneYet: {},\n}\n\n```\n\n### renderStep\nOverwrite the default render step function. This is one step further than just customizing the\nstyle with **stepStyle** prop.\n\n```js\n\nexport type RenderStepType = (\n    mode: StepModeType,\n    step: StepType,\n    stepStyle: StepStyleType,\n    onClick: (stepIndex: number) => () => void,\n) => ?Node;\n\n```\n\nThis is a function that return some JSX,for you to be able to use the *current mode*, the *step*,\nthe *stepStyle* and the default *click handler* in your own steps.\n\n##### default value\n```js\n\ndefaultRenderStep = (\n    mode: StepModeType,\n    step: StepType,\n    stepStyle: StepStyleType,\n    onClick: (stepIndex: number) => () => void,\n) => (\n    <div\n        className=\"step\"\n        style={stepStyle}\n        onClick={onClick(step.index)}\n        role=\"complementary\"\n        onKeyDown={() => {}}\n    >\n        <div className=\"badge\">{step.index + 1}</div>\n        <div className=\"message\">{step.message}</div>\n    </div>\n)\n\n```\n\n### renderStepTail\nSame as **renderStep**, but for the step tail: the space before each step.\n\n>If you want to remove the tails, simply pass a function that returns **null**.\n\n```js\n\nexport type RenderStepTailType = (mode: StepModeType, step: StepType) => ?Node;\n\n```\n\nAgain, this a function, so you can use the *current mode* and the *step* in your own step tails.\n\n##### default value\n```js\n\ndefaultRenderStepTail = (mode: StepModeType, step: StepType) => {\n    if (step.index === 0) return null; // no tail before first step\n\n    const numberOfCircles = 4;\n\n    // [0, 1, ..., numberOfCircles - 1]\n    const dumbArrayToMap = [...Array(numberOfCircles).keys()];\n\n    const delayBetweenEachCircle = 1 / 10;\n\n    // wait for the last circle to finish + add 1 more delay to make it smoother\n    const animationDuration = (numberOfCircles + 2) * delayBetweenEachCircle;\n\n    const circleStyle = delay => (\n        {\n            width: `${100 / (numberOfCircles * 3)}%`,\n            maxWidth: '1em',\n            animation: mode !== 'isNext' ? null // animation only if step is next\n                : `blink ${animationDuration}s linear ${delay}s infinite alternate`,\n        }\n    );\n\n    return (\n        <div className=\"tail\">\n            {dumbArrayToMap.map(index => (\n                <div\n                    // 'index' as key is ok here,\n                    // because no modification will happen on numberOfCircles array\n                    key={index}\n                    className=\"circle\"\n                    style={circleStyle(index * delayBetweenEachCircle)}\n                />\n            ))}\n        </div>\n    );\n}\n\n```\n\n## Copy component inside your project src folder  \n\nIt will copy the component inside your project, in **src/components/adsum-steplist/**.\n\n    npx @adactive/arc-steplist copy\n","readmeFilename":"README.md"}