From 60bca49f05df554c22bfad54b8d6ca2cbdc4eb2b Mon Sep 17 00:00:00 2001 From: Eimi Okuno Date: Sun, 1 Sep 2019 10:35:03 +0100 Subject: [PATCH 01/26] Refactoring some more on the Sortable Elements --- packages/components/ProgrammeScript/index.js | 113 ++++++++++++++++++ .../ProgrammeScript/stories/index.stories.js | 34 ++++++ 2 files changed, 147 insertions(+) create mode 100644 packages/components/ProgrammeScript/index.js create mode 100644 packages/components/ProgrammeScript/stories/index.stories.js diff --git a/packages/components/ProgrammeScript/index.js b/packages/components/ProgrammeScript/index.js new file mode 100644 index 0000000..24f1182 --- /dev/null +++ b/packages/components/ProgrammeScript/index.js @@ -0,0 +1,113 @@ +import React from 'react'; +import Col from 'react-bootstrap/Col'; +import Row from 'react-bootstrap/Row'; +import { + sortableContainer, + sortableElement, + sortableHandle +} from 'react-sortable-hoc'; +import arrayMove from 'array-move'; +import VoiceOver from './VoiceOver'; +import PaperCut from './PaperCut'; +import TitleHeading from './TitleHeading'; +import Note from './Note'; + +import { + faGripLines, + faPen, + faTrash, + faArrowAltCircleLeft, + faArrowAltCircleRight +} from '@fortawesome/free-solid-svg-icons'; +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; + +const InsertPoint = (({ text }) => {text} ); + +const DragHandle = sortableHandle(() => ); + +const SortableItem = sortableElement(({ value, index, type, handleDelete, handleEdit }) => { + return (
  • + + + + + + {value} + + + {/* TODO: if paper-cut then don't show edit/pen icon */} + {type !== 'paper-cut' && type !== 'insert-point' ? { handleEdit(index); } } /> : null} + + + + {/* TODO: pass a prop to remove element from list */} + {type !== 'insert-point' ? {handleDelete(index);} } /> : null} + {type === 'insert-point' ? : null} + + +
    • ); +}); + +const SortableContainer = sortableContainer(({ children }) => { + return ; +}); + +const ProgrammeScript = (props) => { + + const elements = props.elements; + + const onSortEnd = ({ oldIndex, newIndex }) => { + const result = arrayMove(elements, oldIndex, newIndex); + console.log('onsort end'); + console.log(result); + props.handleReorder(result); + }; + + const getElement = (el) => { + switch (el.type) { + case 'title': + return { el:, type: el.type }; + case 'voice-over': + return { el:, type: el.type }; + case 'paper-cut': + return { el: , type: el.type }; + case 'note': + return { el: , type: el.type }; + case 'insert-point': + return { el: , type: el.type }; + default: + console.error('invalid programme element type'); + + return null; + } + }; + + let sortableProgramme; + + if (elements) { + const programme = elements.map((el) => getElement(el)); + + sortableProgramme = + + {programme.map((value, index) => ( + + ))} + ; + } + + return ( + <> + { sortableProgramme } + + ); +}; + +export default ProgrammeScript; + diff --git a/packages/components/ProgrammeScript/stories/index.stories.js b/packages/components/ProgrammeScript/stories/index.stories.js new file mode 100644 index 0000000..c30c0ce --- /dev/null +++ b/packages/components/ProgrammeScript/stories/index.stories.js @@ -0,0 +1,34 @@ +import React from 'react'; + +import { storiesOf } from '@storybook/react'; +import { actions } from '@storybook/addon-actions'; +import ProgrammeScript from '../index.js'; + +export const handleReorderActions = actions({ handleReorder: 'Handle reorder' }); +export const handleDeleteActions = actions({ handleDelete: 'Handle delete' }); +export const handleEditActions = actions({ handleEdit: 'Handle edit' }); + +export const items = [ { + id: '1234', + start: '', + end: 'abc123', + text: 'Sample Simple Card Title One', + type: 'This is a sample card description. This is fun!', +}, { ...item, + id: '5678', + key: 'def456', + title: 'Sample Simple Card Title Two', + description: 'This is a sample card description. This is fun!', + display: true, + url: '/projects/1/transcripts/5678' +} ]; + +storiesOf('ProgrammeScript', module) + .add('Default', () => + + ); \ No newline at end of file From 3345a2938f8aef13b9187b5dba7589563b8385fb Mon Sep 17 00:00:00 2001 From: Eimi Okuno Date: Mon, 2 Sep 2019 11:27:10 +0100 Subject: [PATCH 02/26] Testing out programmescript refactor --- package-lock.json | 15 +++ package.json | 2 + packages/components/ProgrammeScript/index.js | 113 ------------------ .../Elements/Insert.js | 18 +++ .../ProgrammeScriptContainer/Elements/Note.js | 16 +++ .../Elements/PaperCut.js | 52 ++++++++ .../Elements/TitleHeading.js | 18 +++ .../Elements/VoiceOver.js | 24 ++++ .../SortableContainer.js | 13 ++ .../SortableElement.js | 56 +++++++++ .../SortableHandle.js | 17 +++ .../SortableInsert.js | 35 ++++++ .../ProgrammeScriptContainer/index.js | 92 ++++++++++++++ .../stories/index.stories.js | 4 +- 14 files changed, 360 insertions(+), 115 deletions(-) delete mode 100644 packages/components/ProgrammeScript/index.js create mode 100644 packages/components/ProgrammeScriptContainer/Elements/Insert.js create mode 100644 packages/components/ProgrammeScriptContainer/Elements/Note.js create mode 100644 packages/components/ProgrammeScriptContainer/Elements/PaperCut.js create mode 100644 packages/components/ProgrammeScriptContainer/Elements/TitleHeading.js create mode 100644 packages/components/ProgrammeScriptContainer/Elements/VoiceOver.js create mode 100644 packages/components/ProgrammeScriptContainer/SortableContainer.js create mode 100644 packages/components/ProgrammeScriptContainer/SortableElement.js create mode 100644 packages/components/ProgrammeScriptContainer/SortableHandle.js create mode 100644 packages/components/ProgrammeScriptContainer/SortableInsert.js create mode 100644 packages/components/ProgrammeScriptContainer/index.js rename packages/components/{ProgrammeScript => ProgrammeScriptContainer}/stories/index.stories.js (90%) diff --git a/package-lock.json b/package-lock.json index 2c4f74b..99f23cb 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2388,6 +2388,11 @@ "integrity": "sha1-iKK6tz0c97zVwbEYoAP2b2ZfpmI=", "dev": true }, + "array-move": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/array-move/-/array-move-2.1.0.tgz", + "integrity": "sha512-BXEIud+F7/ech2HcSfo+6bpgSCRlNnVTqQhGKdMov9iJkHq+vu9IP9qRXDpZvQpc1WWpDLiEfjs6Lfvvac+fDA==" + }, "array-reduce": { "version": "0.0.0", "resolved": "https://registry.npmjs.org/array-reduce/-/array-reduce-0.0.0.tgz", @@ -10297,6 +10302,16 @@ "throttle-debounce": "^2.1.0" } }, + "react-sortable-hoc": { + "version": "1.10.1", + "resolved": "https://registry.npmjs.org/react-sortable-hoc/-/react-sortable-hoc-1.10.1.tgz", + "integrity": "sha512-eVyv5rrK6qY9bG60bboRY78In7OpdRRg+hxp4QMLIjC/UJaFSU7exTYd0764GtXvBqh+b+faYGzren5/ffRYKw==", + "requires": { + "@babel/runtime": "^7.2.0", + "invariant": "^2.2.4", + "prop-types": "^15.5.7" + } + }, "react-syntax-highlighter": { "version": "8.1.0", "resolved": "https://registry.npmjs.org/react-syntax-highlighter/-/react-syntax-highlighter-8.1.0.tgz", diff --git a/package.json b/package.json index bf7498a..0bd60c8 100644 --- a/package.json +++ b/package.json @@ -26,6 +26,7 @@ "@fortawesome/free-brands-svg-icons": "^5.8.2", "@fortawesome/free-solid-svg-icons": "^5.10.1", "@fortawesome/react-fontawesome": "^0.1.4", + "array-move": "^2.1.0", "bootstrap": "^4.3.1", "bootstrap-css-only": "^4.3.1", "chroma-js": "^2.0.3", @@ -45,6 +46,7 @@ "react-router-bootstrap": "^0.25.0", "react-router-dom": "^5.0.1", "react-select": "^2.4.3", + "react-sortable-hoc": "^1.10.1", "sass-loader": "^7.1.0", "save": "^2.4.0", "style-loader": "^0.23.1", diff --git a/packages/components/ProgrammeScript/index.js b/packages/components/ProgrammeScript/index.js deleted file mode 100644 index 24f1182..0000000 --- a/packages/components/ProgrammeScript/index.js +++ /dev/null @@ -1,113 +0,0 @@ -import React from 'react'; -import Col from 'react-bootstrap/Col'; -import Row from 'react-bootstrap/Row'; -import { - sortableContainer, - sortableElement, - sortableHandle -} from 'react-sortable-hoc'; -import arrayMove from 'array-move'; -import VoiceOver from './VoiceOver'; -import PaperCut from './PaperCut'; -import TitleHeading from './TitleHeading'; -import Note from './Note'; - -import { - faGripLines, - faPen, - faTrash, - faArrowAltCircleLeft, - faArrowAltCircleRight -} from '@fortawesome/free-solid-svg-icons'; -import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; - -const InsertPoint = (({ text }) => {text} ); - -const DragHandle = sortableHandle(() => ); - -const SortableItem = sortableElement(({ value, index, type, handleDelete, handleEdit }) => { - return (
  • - - - - - - {value} - - - {/* TODO: if paper-cut then don't show edit/pen icon */} - {type !== 'paper-cut' && type !== 'insert-point' ? { handleEdit(index); } } /> : null} - - - - {/* TODO: pass a prop to remove element from list */} - {type !== 'insert-point' ? {handleDelete(index);} } /> : null} - {type === 'insert-point' ? : null} - - -
    • ); -}); - -const SortableContainer = sortableContainer(({ children }) => { - return
      {children}
    ; -}); - -const ProgrammeScript = (props) => { - - const elements = props.elements; - - const onSortEnd = ({ oldIndex, newIndex }) => { - const result = arrayMove(elements, oldIndex, newIndex); - console.log('onsort end'); - console.log(result); - props.handleReorder(result); - }; - - const getElement = (el) => { - switch (el.type) { - case 'title': - return { el:, type: el.type }; - case 'voice-over': - return { el:, type: el.type }; - case 'paper-cut': - return { el: , type: el.type }; - case 'note': - return { el: , type: el.type }; - case 'insert-point': - return { el: , type: el.type }; - default: - console.error('invalid programme element type'); - - return null; - } - }; - - let sortableProgramme; - - if (elements) { - const programme = elements.map((el) => getElement(el)); - - sortableProgramme = - - {programme.map((value, index) => ( - - ))} - ; - } - - return ( - <> - { sortableProgramme } - - ); -}; - -export default ProgrammeScript; - diff --git a/packages/components/ProgrammeScriptContainer/Elements/Insert.js b/packages/components/ProgrammeScriptContainer/Elements/Insert.js new file mode 100644 index 0000000..97cdeeb --- /dev/null +++ b/packages/components/ProgrammeScriptContainer/Elements/Insert.js @@ -0,0 +1,18 @@ +import React from 'react'; +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; +import { faArrowAltCircleRight } from '@fortawesome/free-solid-svg-icons'; +import PropTypes from 'prop-types'; + +const Insert = (({ text }) => ( + + + {text} + ) + +); + +Insert.propTypes = { + text: PropTypes.any +}; + +export default Insert; \ No newline at end of file diff --git a/packages/components/ProgrammeScriptContainer/Elements/Note.js b/packages/components/ProgrammeScriptContainer/Elements/Note.js new file mode 100644 index 0000000..a20152f --- /dev/null +++ b/packages/components/ProgrammeScriptContainer/Elements/Note.js @@ -0,0 +1,16 @@ +import React from 'react'; +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; +import { faStickyNote } from '@fortawesome/free-solid-svg-icons'; +import PropTypes from 'prop-types'; + +const Note = (props) => ( +

    + { props.text } +

    +); + +Note.propTypes = { + text: PropTypes.any +}; + +export default Note; diff --git a/packages/components/ProgrammeScriptContainer/Elements/PaperCut.js b/packages/components/ProgrammeScriptContainer/Elements/PaperCut.js new file mode 100644 index 0000000..370efb7 --- /dev/null +++ b/packages/components/ProgrammeScriptContainer/Elements/PaperCut.js @@ -0,0 +1,52 @@ +import React from 'react'; +import cuid from 'cuid'; +import Col from 'react-bootstrap/Col'; +import Row from 'react-bootstrap/Row'; +import PropTypes from 'prop-types'; + +const PaperCut = (props) => { + let words; + if (props.words) { + // TODO could wrap words in span and add timecodes + // to make it cliccable on programme script + words = props.words.map((w) => { + return ( + {w.text} );}); + } + + return ( + <> + + + {props.speaker.toUpperCase()} + {/*
    */} + {/* 00:01:20 */} + {/*
    */} + {/* TagExample */} + + + {/*

    { JSON.stringify(this.props.words) }

    */} + { words } + +     + + ); +}; + +PaperCut.propTypes = { + speaker: PropTypes.any, + words: PropTypes.any +}; + +export default PaperCut; diff --git a/packages/components/ProgrammeScriptContainer/Elements/TitleHeading.js b/packages/components/ProgrammeScriptContainer/Elements/TitleHeading.js new file mode 100644 index 0000000..bccd95b --- /dev/null +++ b/packages/components/ProgrammeScriptContainer/Elements/TitleHeading.js @@ -0,0 +1,18 @@ +import React, { Component } from 'react'; + +class TitleHeading extends Component { + constructor(props) { + super(props); + this.state = { + + }; + } + + render() { + return ( +

    {this.props.title}

    + ); + } +} + +export default TitleHeading; diff --git a/packages/components/ProgrammeScriptContainer/Elements/VoiceOver.js b/packages/components/ProgrammeScriptContainer/Elements/VoiceOver.js new file mode 100644 index 0000000..5523b86 --- /dev/null +++ b/packages/components/ProgrammeScriptContainer/Elements/VoiceOver.js @@ -0,0 +1,24 @@ +import React, { Component } from 'react'; +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; +import { faMicrophoneAlt } from '@fortawesome/free-solid-svg-icons'; + +class VoiceOver extends Component { + constructor(props) { + super(props); + this.state = { + + }; + } + + render() { + return ( + <> +

    + { this.props.text } +

    + + ); + } +} + +export default VoiceOver; diff --git a/packages/components/ProgrammeScriptContainer/SortableContainer.js b/packages/components/ProgrammeScriptContainer/SortableContainer.js new file mode 100644 index 0000000..aa8e887 --- /dev/null +++ b/packages/components/ProgrammeScriptContainer/SortableContainer.js @@ -0,0 +1,13 @@ +import React from 'react'; +import { sortableContainer, } from 'react-sortable-hoc'; + +const SortableContainer = ({ children }) => { + const unoList = () => ( +
      + {children} +
    ); + + return sortableContainer(unoList); +}; + +export default SortableContainer; \ No newline at end of file diff --git a/packages/components/ProgrammeScriptContainer/SortableElement.js b/packages/components/ProgrammeScriptContainer/SortableElement.js new file mode 100644 index 0000000..2ec1dfe --- /dev/null +++ b/packages/components/ProgrammeScriptContainer/SortableElement.js @@ -0,0 +1,56 @@ +import React from 'react'; +import { + sortableElement, +} from 'react-sortable-hoc'; + +import Col from 'react-bootstrap/Col'; +import Row from 'react-bootstrap/Row'; + +import { + faPen, + faTrash, +} from '@fortawesome/free-solid-svg-icons'; +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; + +import SortableHandle from './SortableHandle'; + +const SortableElement = sortableElement(({ value, index, handleDelete, handleEdit }) => { + + const EditIcon = ( + { handleEdit(index); } }> + + + ); + + const DeleteIcon = ( + { handleDelete(index); } }> + + ); + + return ( +
  • + + + + + + {value} + + + {handleEdit ? EditIcon : null} + + + {handleDelete ? DeleteIcon : null} + + +
    • + ); +}); + +export default SortableElement; \ No newline at end of file diff --git a/packages/components/ProgrammeScriptContainer/SortableHandle.js b/packages/components/ProgrammeScriptContainer/SortableHandle.js new file mode 100644 index 0000000..3c0ce91 --- /dev/null +++ b/packages/components/ProgrammeScriptContainer/SortableHandle.js @@ -0,0 +1,17 @@ +import React from 'react'; +import { + sortableHandle +} from 'react-sortable-hoc'; + +import { + faGripLines, +} from '@fortawesome/free-solid-svg-icons'; +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; + +const SortableHandle = sortableHandle(() => ( + + + ) +); + +export default SortableHandle; \ No newline at end of file diff --git a/packages/components/ProgrammeScriptContainer/SortableInsert.js b/packages/components/ProgrammeScriptContainer/SortableInsert.js new file mode 100644 index 0000000..9d4e5f3 --- /dev/null +++ b/packages/components/ProgrammeScriptContainer/SortableInsert.js @@ -0,0 +1,35 @@ +import React from 'react'; +import { + faArrowAltCircleLeft, +} from '@fortawesome/free-solid-svg-icons'; +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; +import { + sortableElement, +} from 'react-sortable-hoc'; + +import Col from 'react-bootstrap/Col'; +import Row from 'react-bootstrap/Row'; + +import SortableHandle from './SortableHandle'; + +const SortableInsert = sortableElement(({ value }) => { + return ( +
  • + + + + + + {value} + + + + + + + +
    • + ); +}); + +export default SortableInsert; \ No newline at end of file diff --git a/packages/components/ProgrammeScriptContainer/index.js b/packages/components/ProgrammeScriptContainer/index.js new file mode 100644 index 0000000..9f480e8 --- /dev/null +++ b/packages/components/ProgrammeScriptContainer/index.js @@ -0,0 +1,92 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import cuid from 'cuid'; +import arrayMove from 'array-move'; + +import SortableElement from './SortableElement'; +import SortableContainer from './SortableContainer'; + +import VoiceOver from './Elements/VoiceOver'; +import PaperCut from './Elements/PaperCut'; +import TitleHeading from './Elements/TitleHeading'; +import Note from './Elements/Note'; +import Insert from './Elements/Insert'; + +import SortableInsert from './SortableInsert'; + +const getValue = (el) => { + switch (el.type) { + case 'title': + return { el: }; + case 'voice-over': + return { el: }; + case 'paper-cut': + return { el: }; + case 'note': + return { el: }; + case 'insert': + return { el: }; + default: + console.error('invalid programme element type'); + + return null; + } +}; + +const ProgrammeScriptContainer = (props) => { + + let sortableProgramme; + const elements = props.elements; + + const onSortEnd = ({ oldIndex, newIndex }) => { + const result = arrayMove(elements, oldIndex, newIndex); + console.log(result); + props.handleReorder(result); + }; + + if (elements) { + const programme = elements.map((el, index) => { + const value = getValue(el); + const type = el.type; + + let handleEdit = props.handleEdit; + const handleDelete = props.handleDelete; + + if (type === 'insert') { + return (); + } else { + if (type === 'paper-cut') { + handleEdit = null; + } + + return (); + } + }); + sortableProgramme = + + {programme} + ; + } + + return ( + <> + { sortableProgramme } + + ); +}; + +ProgrammeScriptContainer.propTypes = { + elements: PropTypes.any, + handleDelete: PropTypes.any, + handleEdit: PropTypes.any, + handleReorder: PropTypes.any +}; + +export default ProgrammeScriptContainer; diff --git a/packages/components/ProgrammeScript/stories/index.stories.js b/packages/components/ProgrammeScriptContainer/stories/index.stories.js similarity index 90% rename from packages/components/ProgrammeScript/stories/index.stories.js rename to packages/components/ProgrammeScriptContainer/stories/index.stories.js index c30c0ce..1c062e4 100644 --- a/packages/components/ProgrammeScript/stories/index.stories.js +++ b/packages/components/ProgrammeScriptContainer/stories/index.stories.js @@ -2,7 +2,7 @@ import React from 'react'; import { storiesOf } from '@storybook/react'; import { actions } from '@storybook/addon-actions'; -import ProgrammeScript from '../index.js'; +import ProgrammeScriptContainer from '../../ProgrammeScriptContainer/'; export const handleReorderActions = actions({ handleReorder: 'Handle reorder' }); export const handleDeleteActions = actions({ handleDelete: 'Handle delete' }); @@ -25,7 +25,7 @@ export const items = [ { storiesOf('ProgrammeScript', module) .add('Default', () => - Date: Mon, 2 Sep 2019 17:26:55 +0100 Subject: [PATCH 03/26] Update stories --- .../ProgrammeScriptContainer/index.js | 1 - .../stories/index.stories.js | 31 ++++++++++--------- 2 files changed, 17 insertions(+), 15 deletions(-) diff --git a/packages/components/ProgrammeScriptContainer/index.js b/packages/components/ProgrammeScriptContainer/index.js index 9f480e8..d4aef2c 100644 --- a/packages/components/ProgrammeScriptContainer/index.js +++ b/packages/components/ProgrammeScriptContainer/index.js @@ -40,7 +40,6 @@ const ProgrammeScriptContainer = (props) => { const onSortEnd = ({ oldIndex, newIndex }) => { const result = arrayMove(elements, oldIndex, newIndex); - console.log(result); props.handleReorder(result); }; diff --git a/packages/components/ProgrammeScriptContainer/stories/index.stories.js b/packages/components/ProgrammeScriptContainer/stories/index.stories.js index 1c062e4..fe1d651 100644 --- a/packages/components/ProgrammeScriptContainer/stories/index.stories.js +++ b/packages/components/ProgrammeScriptContainer/stories/index.stories.js @@ -8,20 +8,23 @@ export const handleReorderActions = actions({ handleReorder: 'Handle reorder' }) export const handleDeleteActions = actions({ handleDelete: 'Handle delete' }); export const handleEditActions = actions({ handleEdit: 'Handle edit' }); -export const items = [ { - id: '1234', - start: '', - end: 'abc123', - text: 'Sample Simple Card Title One', - type: 'This is a sample card description. This is fun!', -}, { ...item, - id: '5678', - key: 'def456', - title: 'Sample Simple Card Title Two', - description: 'This is a sample card description. This is fun!', - display: true, - url: '/projects/1/transcripts/5678' -} ]; +export const items = [ + { + id: '1234', + start: '', + end: 'abc123', + text: 'Sample Simple Card Title One', + type: 'This is a sample card description. This is fun!', + }, + { ...item, + id: '5678', + key: 'def456', + title: 'Sample Simple Card Title Two', + description: 'This is a sample card description. This is fun!', + display: true, + url: '/projects/1/transcripts/5678' + } +]; storiesOf('ProgrammeScript', module) .add('Default', () => From c2769b17cbb3d29c55c93e9dc959d4ca985d1591 Mon Sep 17 00:00:00 2001 From: Eimi Okuno Date: Fri, 6 Sep 2019 11:58:44 +0100 Subject: [PATCH 04/26] Updating stories for programme script --- .../stories/index.stories.js | 16 +--------------- 1 file changed, 1 insertion(+), 15 deletions(-) diff --git a/packages/components/ProgrammeScriptContainer/stories/index.stories.js b/packages/components/ProgrammeScriptContainer/stories/index.stories.js index fe1d651..96f3f4d 100644 --- a/packages/components/ProgrammeScriptContainer/stories/index.stories.js +++ b/packages/components/ProgrammeScriptContainer/stories/index.stories.js @@ -9,21 +9,7 @@ export const handleDeleteActions = actions({ handleDelete: 'Handle delete' }); export const handleEditActions = actions({ handleEdit: 'Handle edit' }); export const items = [ - { - id: '1234', - start: '', - end: 'abc123', - text: 'Sample Simple Card Title One', - type: 'This is a sample card description. This is fun!', - }, - { ...item, - id: '5678', - key: 'def456', - title: 'Sample Simple Card Title Two', - description: 'This is a sample card description. This is fun!', - display: true, - url: '/projects/1/transcripts/5678' - } + ]; storiesOf('ProgrammeScript', module) From 5f2b2c695397ba63ced6c634dbe8c756efd2a9e2 Mon Sep 17 00:00:00 2001 From: Eimi Okuno Date: Mon, 9 Sep 2019 17:55:41 +0100 Subject: [PATCH 05/26] Refactoring, getting most of it to work together --- .../Elements/Insert.js | 18 ----- .../Elements/TitleHeading.js | 18 ----- .../{Elements => ProgrammeElements}/Note.js | 0 .../PaperCut.js | 3 +- .../{ => ProgrammeElements}/SortableHandle.js | 0 .../{ => ProgrammeElements}/SortableInsert.js | 10 ++- .../SortableItem.js} | 8 +- .../ProgrammeElements/TitleHeading.js | 5 ++ .../VoiceOver.js | 0 .../ProgrammeElements/index.js | 67 +++++++++++++++++ .../SortableContainer.js | 13 ---- .../ProgrammeScriptContainer/SortableList.js | 11 +++ .../ProgrammeScriptContainer/index.js | 74 ++----------------- .../stories/index.stories.js | 49 +++++++++--- packages/components/SimpleCard/index.js | 8 +- 15 files changed, 149 insertions(+), 135 deletions(-) delete mode 100644 packages/components/ProgrammeScriptContainer/Elements/Insert.js delete mode 100644 packages/components/ProgrammeScriptContainer/Elements/TitleHeading.js rename packages/components/ProgrammeScriptContainer/{Elements => ProgrammeElements}/Note.js (100%) rename packages/components/ProgrammeScriptContainer/{Elements => ProgrammeElements}/PaperCut.js (97%) rename packages/components/ProgrammeScriptContainer/{ => ProgrammeElements}/SortableHandle.js (100%) rename packages/components/ProgrammeScriptContainer/{ => ProgrammeElements}/SortableInsert.js (74%) rename packages/components/ProgrammeScriptContainer/{SortableElement.js => ProgrammeElements/SortableItem.js} (86%) create mode 100644 packages/components/ProgrammeScriptContainer/ProgrammeElements/TitleHeading.js rename packages/components/ProgrammeScriptContainer/{Elements => ProgrammeElements}/VoiceOver.js (100%) create mode 100644 packages/components/ProgrammeScriptContainer/ProgrammeElements/index.js delete mode 100644 packages/components/ProgrammeScriptContainer/SortableContainer.js create mode 100644 packages/components/ProgrammeScriptContainer/SortableList.js diff --git a/packages/components/ProgrammeScriptContainer/Elements/Insert.js b/packages/components/ProgrammeScriptContainer/Elements/Insert.js deleted file mode 100644 index 97cdeeb..0000000 --- a/packages/components/ProgrammeScriptContainer/Elements/Insert.js +++ /dev/null @@ -1,18 +0,0 @@ -import React from 'react'; -import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { faArrowAltCircleRight } from '@fortawesome/free-solid-svg-icons'; -import PropTypes from 'prop-types'; - -const Insert = (({ text }) => ( - - - {text} - ) - -); - -Insert.propTypes = { - text: PropTypes.any -}; - -export default Insert; \ No newline at end of file diff --git a/packages/components/ProgrammeScriptContainer/Elements/TitleHeading.js b/packages/components/ProgrammeScriptContainer/Elements/TitleHeading.js deleted file mode 100644 index bccd95b..0000000 --- a/packages/components/ProgrammeScriptContainer/Elements/TitleHeading.js +++ /dev/null @@ -1,18 +0,0 @@ -import React, { Component } from 'react'; - -class TitleHeading extends Component { - constructor(props) { - super(props); - this.state = { - - }; - } - - render() { - return ( -

    {this.props.title}

    - ); - } -} - -export default TitleHeading; diff --git a/packages/components/ProgrammeScriptContainer/Elements/Note.js b/packages/components/ProgrammeScriptContainer/ProgrammeElements/Note.js similarity index 100% rename from packages/components/ProgrammeScriptContainer/Elements/Note.js rename to packages/components/ProgrammeScriptContainer/ProgrammeElements/Note.js diff --git a/packages/components/ProgrammeScriptContainer/Elements/PaperCut.js b/packages/components/ProgrammeScriptContainer/ProgrammeElements/PaperCut.js similarity index 97% rename from packages/components/ProgrammeScriptContainer/Elements/PaperCut.js rename to packages/components/ProgrammeScriptContainer/ProgrammeElements/PaperCut.js index 370efb7..699b5ea 100644 --- a/packages/components/ProgrammeScriptContainer/Elements/PaperCut.js +++ b/packages/components/ProgrammeScriptContainer/ProgrammeElements/PaperCut.js @@ -18,7 +18,8 @@ const PaperCut = (props) => { title={ `stat: ${ w.start }- end: ${ w.end }` } data-start={ w.start } data-end={ w.end } - >{w.text} );}); + >{w.text} + );}); } return ( diff --git a/packages/components/ProgrammeScriptContainer/SortableHandle.js b/packages/components/ProgrammeScriptContainer/ProgrammeElements/SortableHandle.js similarity index 100% rename from packages/components/ProgrammeScriptContainer/SortableHandle.js rename to packages/components/ProgrammeScriptContainer/ProgrammeElements/SortableHandle.js diff --git a/packages/components/ProgrammeScriptContainer/SortableInsert.js b/packages/components/ProgrammeScriptContainer/ProgrammeElements/SortableInsert.js similarity index 74% rename from packages/components/ProgrammeScriptContainer/SortableInsert.js rename to packages/components/ProgrammeScriptContainer/ProgrammeElements/SortableInsert.js index 9d4e5f3..92f6e48 100644 --- a/packages/components/ProgrammeScriptContainer/SortableInsert.js +++ b/packages/components/ProgrammeScriptContainer/ProgrammeElements/SortableInsert.js @@ -3,8 +3,9 @@ import { faArrowAltCircleLeft, } from '@fortawesome/free-solid-svg-icons'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; +import { faArrowAltCircleRight } from '@fortawesome/free-solid-svg-icons'; import { - sortableElement, + SortableElement, } from 'react-sortable-hoc'; import Col from 'react-bootstrap/Col'; @@ -12,7 +13,7 @@ import Row from 'react-bootstrap/Row'; import SortableHandle from './SortableHandle'; -const SortableInsert = sortableElement(({ value }) => { +const SortableInsert = SortableElement(({ text }) => { return (
  • @@ -20,7 +21,10 @@ const SortableInsert = sortableElement(({ value }) => { - {value} + + + {text} + diff --git a/packages/components/ProgrammeScriptContainer/SortableElement.js b/packages/components/ProgrammeScriptContainer/ProgrammeElements/SortableItem.js similarity index 86% rename from packages/components/ProgrammeScriptContainer/SortableElement.js rename to packages/components/ProgrammeScriptContainer/ProgrammeElements/SortableItem.js index 2ec1dfe..967e881 100644 --- a/packages/components/ProgrammeScriptContainer/SortableElement.js +++ b/packages/components/ProgrammeScriptContainer/ProgrammeElements/SortableItem.js @@ -1,7 +1,5 @@ import React from 'react'; -import { - sortableElement, -} from 'react-sortable-hoc'; +import { SortableElement } from 'react-sortable-hoc'; import Col from 'react-bootstrap/Col'; import Row from 'react-bootstrap/Row'; @@ -14,7 +12,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import SortableHandle from './SortableHandle'; -const SortableElement = sortableElement(({ value, index, handleDelete, handleEdit }) => { +const SortableItem = SortableElement(({ value, index, handleDelete, handleEdit }) => { const EditIcon = (

    {text}

    ; + +export default TitleHeading; diff --git a/packages/components/ProgrammeScriptContainer/Elements/VoiceOver.js b/packages/components/ProgrammeScriptContainer/ProgrammeElements/VoiceOver.js similarity index 100% rename from packages/components/ProgrammeScriptContainer/Elements/VoiceOver.js rename to packages/components/ProgrammeScriptContainer/ProgrammeElements/VoiceOver.js diff --git a/packages/components/ProgrammeScriptContainer/ProgrammeElements/index.js b/packages/components/ProgrammeScriptContainer/ProgrammeElements/index.js new file mode 100644 index 0000000..64063df --- /dev/null +++ b/packages/components/ProgrammeScriptContainer/ProgrammeElements/index.js @@ -0,0 +1,67 @@ +import React from 'react'; +import cuid from 'cuid'; + +import VoiceOver from './VoiceOver'; +import PaperCut from './PaperCut'; +import TitleHeading from './TitleHeading'; +import Note from './Note'; + +import SortableItem from './SortableItem'; +import SortableInsert from './SortableInsert'; + +const adaptAddedElement = (type, text) => { + switch (type) { + case 'title': + return (); + case 'voice-over': + return ; + case 'note': + return ; + default: + console.error('invalid added element type: ', type, text); + + return null; + } +}; + +const ProgrammeElements = (elements, handleEdit, handleDelete) => { + return elements.map((el, index) => { + const type = el.type; + + if (type === 'insert') { + console.log('insert returning'); + + return ( ); + + } + + if (type === 'paper-cut') { + return ( + + } + type={ type } + handleDelete={ handleDelete } + handleEdit={ null } + />); + } + + return ( + + ); + }); +}; + +export default ProgrammeElements; \ No newline at end of file diff --git a/packages/components/ProgrammeScriptContainer/SortableContainer.js b/packages/components/ProgrammeScriptContainer/SortableContainer.js deleted file mode 100644 index aa8e887..0000000 --- a/packages/components/ProgrammeScriptContainer/SortableContainer.js +++ /dev/null @@ -1,13 +0,0 @@ -import React from 'react'; -import { sortableContainer, } from 'react-sortable-hoc'; - -const SortableContainer = ({ children }) => { - const unoList = () => ( -
      - {children} -
    ); - - return sortableContainer(unoList); -}; - -export default SortableContainer; \ No newline at end of file diff --git a/packages/components/ProgrammeScriptContainer/SortableList.js b/packages/components/ProgrammeScriptContainer/SortableList.js new file mode 100644 index 0000000..85fa82a --- /dev/null +++ b/packages/components/ProgrammeScriptContainer/SortableList.js @@ -0,0 +1,11 @@ +import React from 'react'; +import { SortableContainer, } from 'react-sortable-hoc'; + +const SortableList = SortableContainer(({ children }) => { + return ( +
      + {children} +
    ); +}); + +export default SortableList; \ No newline at end of file diff --git a/packages/components/ProgrammeScriptContainer/index.js b/packages/components/ProgrammeScriptContainer/index.js index d4aef2c..bae172f 100644 --- a/packages/components/ProgrammeScriptContainer/index.js +++ b/packages/components/ProgrammeScriptContainer/index.js @@ -1,41 +1,9 @@ import React from 'react'; import PropTypes from 'prop-types'; -import cuid from 'cuid'; import arrayMove from 'array-move'; - -import SortableElement from './SortableElement'; -import SortableContainer from './SortableContainer'; - -import VoiceOver from './Elements/VoiceOver'; -import PaperCut from './Elements/PaperCut'; -import TitleHeading from './Elements/TitleHeading'; -import Note from './Elements/Note'; -import Insert from './Elements/Insert'; - -import SortableInsert from './SortableInsert'; - -const getValue = (el) => { - switch (el.type) { - case 'title': - return { el: }; - case 'voice-over': - return { el: }; - case 'paper-cut': - return { el: }; - case 'note': - return { el: }; - case 'insert': - return { el: }; - default: - console.error('invalid programme element type'); - - return null; - } -}; +import SortableList from './SortableList'; const ProgrammeScriptContainer = (props) => { - - let sortableProgramme; const elements = props.elements; const onSortEnd = ({ oldIndex, newIndex }) => { @@ -43,36 +11,10 @@ const ProgrammeScriptContainer = (props) => { props.handleReorder(result); }; - if (elements) { - const programme = elements.map((el, index) => { - const value = getValue(el); - const type = el.type; - - let handleEdit = props.handleEdit; - const handleDelete = props.handleDelete; - - if (type === 'insert') { - return (); - } else { - if (type === 'paper-cut') { - handleEdit = null; - } - - return (); - } - }); - sortableProgramme = - - {programme} - ; - } + const sortableProgramme = ( + + {elements} + ); return ( <> @@ -83,9 +25,9 @@ const ProgrammeScriptContainer = (props) => { ProgrammeScriptContainer.propTypes = { elements: PropTypes.any, - handleDelete: PropTypes.any, - handleEdit: PropTypes.any, - handleReorder: PropTypes.any + handleDelete: PropTypes.func, + handleEdit: PropTypes.func, + handleReorder: PropTypes.func }; export default ProgrammeScriptContainer; diff --git a/packages/components/ProgrammeScriptContainer/stories/index.stories.js b/packages/components/ProgrammeScriptContainer/stories/index.stories.js index 96f3f4d..48959c2 100644 --- a/packages/components/ProgrammeScriptContainer/stories/index.stories.js +++ b/packages/components/ProgrammeScriptContainer/stories/index.stories.js @@ -1,23 +1,54 @@ import React from 'react'; import { storiesOf } from '@storybook/react'; -import { actions } from '@storybook/addon-actions'; -import ProgrammeScriptContainer from '../../ProgrammeScriptContainer/'; +import { action } from '@storybook/addon-actions'; +import ProgrammeScriptContainer from '../index.js'; +import ProgrammeElements from '../ProgrammeElements'; -export const handleReorderActions = actions({ handleReorder: 'Handle reorder' }); -export const handleDeleteActions = actions({ handleDelete: 'Handle delete' }); -export const handleEditActions = actions({ handleEdit: 'Handle edit' }); - -export const items = [ +export const handleReorderActions = action('Handle reorder'); +export const handleDeleteActions = action('Handle delete'); +export const handleEditActions = action('Handle edit'); +const items = [ + { + type: 'paper-cut', + id: 1, + speaker: 'loud', + words: [ { text:'sdf', start: 0, end: 1 } ] + }, + { + type: 'paper-cut', + id: 2, + speaker: 'loud', + words: [ { text:'sdf', start: 0, end: 1 } ] + }, + { + type: 'title', + text: 'WOW' + }, + { + type: 'voice-over', + text: 'insert VO' + }, + { + type: 'note', + text: 'note' + }, + { + type: 'insert', + text: 'omg' + } ]; +export const elements = ProgrammeElements(items, handleEditActions, handleDeleteActions); +console.log(elements); + storiesOf('ProgrammeScript', module) .add('Default', () => ); \ No newline at end of file diff --git a/packages/components/SimpleCard/index.js b/packages/components/SimpleCard/index.js index 9a52354..536f9dc 100644 --- a/packages/components/SimpleCard/index.js +++ b/packages/components/SimpleCard/index.js @@ -17,9 +17,13 @@ const SimpleCard = (props) => { const confirmDeleteText = "Click OK if you wish to delete or cancel if you don't"; const cancelDeleteText = 'All is good, it was not deleted'; const confirmationPrompt = window.confirm(confirmDeleteText); - + if (confirmationPrompt) { - props.handleDelete ? props.handleDelete(props.id) : alert(cancelDeleteText); + if (props.handleDelete) { + props.handleDelete(props.id); + } else { + alert(cancelDeleteText); + } } }; From a3f7dbed258058fa3bfa6a68e0764635241eaa37 Mon Sep 17 00:00:00 2001 From: Eimi Okuno Date: Mon, 9 Sep 2019 18:19:42 +0100 Subject: [PATCH 06/26] Getting the storybooks to render elemts but not reorder corrently --- .../ProgrammeScriptContainer/SortableList.js | 11 ------ .../ProgrammeScriptContainer/index.js | 28 ++++++++------ .../stories/index.stories.js | 38 +++++++++---------- 3 files changed, 35 insertions(+), 42 deletions(-) delete mode 100644 packages/components/ProgrammeScriptContainer/SortableList.js diff --git a/packages/components/ProgrammeScriptContainer/SortableList.js b/packages/components/ProgrammeScriptContainer/SortableList.js deleted file mode 100644 index 85fa82a..0000000 --- a/packages/components/ProgrammeScriptContainer/SortableList.js +++ /dev/null @@ -1,11 +0,0 @@ -import React from 'react'; -import { SortableContainer, } from 'react-sortable-hoc'; - -const SortableList = SortableContainer(({ children }) => { - return ( -
      - {children} -
    ); -}); - -export default SortableList; \ No newline at end of file diff --git a/packages/components/ProgrammeScriptContainer/index.js b/packages/components/ProgrammeScriptContainer/index.js index bae172f..6868430 100644 --- a/packages/components/ProgrammeScriptContainer/index.js +++ b/packages/components/ProgrammeScriptContainer/index.js @@ -1,30 +1,36 @@ -import React from 'react'; +import React, { useState } from 'react'; import PropTypes from 'prop-types'; import arrayMove from 'array-move'; -import SortableList from './SortableList'; +import { SortableContainer, } from 'react-sortable-hoc'; +import ProgrammeElements from './ProgrammeElements'; + +const SortableList = SortableContainer(({ children }) => { + return ( +
  • + {children} +
    • ); +}); const ProgrammeScriptContainer = (props) => { - const elements = props.elements; + const programmeElements = ProgrammeElements(props.items, props.handleEdit, props.handleDelete); + const [ elements, setElements ] = useState(programmeElements); const onSortEnd = ({ oldIndex, newIndex }) => { const result = arrayMove(elements, oldIndex, newIndex); props.handleReorder(result); + setElements(result); }; - const sortableProgramme = ( + return ( {elements} - ); - - return ( - <> - { sortableProgramme } - + ); + }; ProgrammeScriptContainer.propTypes = { - elements: PropTypes.any, + items: PropTypes.any, handleDelete: PropTypes.func, handleEdit: PropTypes.func, handleReorder: PropTypes.func diff --git a/packages/components/ProgrammeScriptContainer/stories/index.stories.js b/packages/components/ProgrammeScriptContainer/stories/index.stories.js index 48959c2..b14101a 100644 --- a/packages/components/ProgrammeScriptContainer/stories/index.stories.js +++ b/packages/components/ProgrammeScriptContainer/stories/index.stories.js @@ -3,7 +3,6 @@ import React from 'react'; import { storiesOf } from '@storybook/react'; import { action } from '@storybook/addon-actions'; import ProgrammeScriptContainer from '../index.js'; -import ProgrammeElements from '../ProgrammeElements'; export const handleReorderActions = action('Handle reorder'); export const handleDeleteActions = action('Handle delete'); @@ -11,42 +10,41 @@ export const handleEditActions = action('Handle edit'); const items = [ { - type: 'paper-cut', - id: 1, - speaker: 'loud', - words: [ { text:'sdf', start: 0, end: 1 } ] + type: 'title', + text: 'An immense Achievement' }, { type: 'paper-cut', - id: 2, - speaker: 'loud', - words: [ { text:'sdf', start: 0, end: 1 } ] + id: 1, + speaker: 'Mr Loud', + words: [ { text:'Greatest day of my life was when I wrote this text.', start: 0, end: 1 } ] }, { - type: 'title', - text: 'WOW' + type: 'note', + text: 'Maybe a little bit obnoxious' }, { - type: 'voice-over', - text: 'insert VO' + type: 'insert', + text: 'Insert New Selection here' }, { - type: 'note', - text: 'note' + type: 'paper-cut', + id: 2, + speaker: 'Mrs Loud', + words: [ { text:'Greatest day of my life was when I spoke this text.', start: 0, end: 1 } ] }, { - type: 'insert', - text: 'omg' - } + type: 'voice-over', + text: 'link: wonderful times of the Loud family' + }, ]; -export const elements = ProgrammeElements(items, handleEditActions, handleDeleteActions); -console.log(elements); +// export const elements = ProgrammeElements(items, handleEditActions, handleDeleteActions); storiesOf('ProgrammeScript', module) .add('Default', () => Date: Tue, 10 Sep 2019 15:12:32 +0100 Subject: [PATCH 07/26] Temp commit --- .../ProgrammeScriptContainer/ProgrammeElements/SortableItem.js | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/components/ProgrammeScriptContainer/ProgrammeElements/SortableItem.js b/packages/components/ProgrammeScriptContainer/ProgrammeElements/SortableItem.js index 967e881..e698dcd 100644 --- a/packages/components/ProgrammeScriptContainer/ProgrammeElements/SortableItem.js +++ b/packages/components/ProgrammeScriptContainer/ProgrammeElements/SortableItem.js @@ -19,7 +19,6 @@ const SortableItem = SortableElement(({ value, index, handleDelete, handleEdit } className={ 'text-muted' } icon={ faPen } onClick={ () => { handleEdit(index); } }> - ); From c0b0af3345391ec1069b65eaa3238f7974efe1cc Mon Sep 17 00:00:00 2001 From: Eimi Okuno Date: Wed, 11 Sep 2019 09:28:45 +0100 Subject: [PATCH 08/26] Fixed programme elements --- .../ProgrammeElements/SortableInsert.js | 4 ++-- .../ProgrammeElements/SortableItem.js | 4 ++-- .../ProgrammeElements/index.js | 19 ++++++++++++------- .../ProgrammeScriptContainer/index.js | 5 +++-- 4 files changed, 19 insertions(+), 13 deletions(-) diff --git a/packages/components/ProgrammeScriptContainer/ProgrammeElements/SortableInsert.js b/packages/components/ProgrammeScriptContainer/ProgrammeElements/SortableInsert.js index 92f6e48..b1af6f2 100644 --- a/packages/components/ProgrammeScriptContainer/ProgrammeElements/SortableInsert.js +++ b/packages/components/ProgrammeScriptContainer/ProgrammeElements/SortableInsert.js @@ -15,7 +15,7 @@ import SortableHandle from './SortableHandle'; const SortableInsert = SortableElement(({ text }) => { return ( -
  • +
      @@ -32,7 +32,7 @@ const SortableInsert = SortableElement(({ text }) => { - +
    ); }); diff --git a/packages/components/ProgrammeScriptContainer/ProgrammeElements/SortableItem.js b/packages/components/ProgrammeScriptContainer/ProgrammeElements/SortableItem.js index e698dcd..8f00af1 100644 --- a/packages/components/ProgrammeScriptContainer/ProgrammeElements/SortableItem.js +++ b/packages/components/ProgrammeScriptContainer/ProgrammeElements/SortableItem.js @@ -31,7 +31,7 @@ const SortableItem = SortableElement(({ value, index, handleDelete, handleEdit } ); return ( -
  • +
      @@ -46,7 +46,7 @@ const SortableItem = SortableElement(({ value, index, handleDelete, handleEdit } {handleDelete ? DeleteIcon : null} - +
    ); }); diff --git a/packages/components/ProgrammeScriptContainer/ProgrammeElements/index.js b/packages/components/ProgrammeScriptContainer/ProgrammeElements/index.js index 64063df..753db32 100644 --- a/packages/components/ProgrammeScriptContainer/ProgrammeElements/index.js +++ b/packages/components/ProgrammeScriptContainer/ProgrammeElements/index.js @@ -26,19 +26,25 @@ const adaptAddedElement = (type, text) => { const ProgrammeElements = (elements, handleEdit, handleDelete) => { return elements.map((el, index) => { + const key = cuid(); const type = el.type; + const text = el.text; if (type === 'insert') { - console.log('insert returning'); - - return ( ); + return ( + + ); } if (type === 'paper-cut') { return ( { words={ el.words } /> } - type={ type } handleDelete={ handleDelete } handleEdit={ null } />); @@ -54,9 +59,9 @@ const ProgrammeElements = (elements, handleEdit, handleDelete) => { return ( diff --git a/packages/components/ProgrammeScriptContainer/index.js b/packages/components/ProgrammeScriptContainer/index.js index 6868430..5f7e080 100644 --- a/packages/components/ProgrammeScriptContainer/index.js +++ b/packages/components/ProgrammeScriptContainer/index.js @@ -6,9 +6,10 @@ import ProgrammeElements from './ProgrammeElements'; const SortableList = SortableContainer(({ children }) => { return ( -
  • +
      {children} - ); +
    + ); }); const ProgrammeScriptContainer = (props) => { From fb982d0a66492ea065d8be3c128555b2dc78bd89 Mon Sep 17 00:00:00 2001 From: Eimi Okuno Date: Wed, 11 Sep 2019 09:43:11 +0100 Subject: [PATCH 09/26] Removing insert as a separate component --- .../ProgrammeElements/SortableInsert.js | 39 ------------------- .../ProgrammeElements/SortableItem.js | 12 +++--- .../ProgrammeElements/index.js | 6 ++- 3 files changed, 11 insertions(+), 46 deletions(-) delete mode 100644 packages/components/ProgrammeScriptContainer/ProgrammeElements/SortableInsert.js diff --git a/packages/components/ProgrammeScriptContainer/ProgrammeElements/SortableInsert.js b/packages/components/ProgrammeScriptContainer/ProgrammeElements/SortableInsert.js deleted file mode 100644 index b1af6f2..0000000 --- a/packages/components/ProgrammeScriptContainer/ProgrammeElements/SortableInsert.js +++ /dev/null @@ -1,39 +0,0 @@ -import React from 'react'; -import { - faArrowAltCircleLeft, -} from '@fortawesome/free-solid-svg-icons'; -import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { faArrowAltCircleRight } from '@fortawesome/free-solid-svg-icons'; -import { - SortableElement, -} from 'react-sortable-hoc'; - -import Col from 'react-bootstrap/Col'; -import Row from 'react-bootstrap/Row'; - -import SortableHandle from './SortableHandle'; - -const SortableInsert = SortableElement(({ text }) => { - return ( -
      - - - - - - - - {text} - - - - - - - - -
    - ); -}); - -export default SortableInsert; \ No newline at end of file diff --git a/packages/components/ProgrammeScriptContainer/ProgrammeElements/SortableItem.js b/packages/components/ProgrammeScriptContainer/ProgrammeElements/SortableItem.js index 8f00af1..9ee61d2 100644 --- a/packages/components/ProgrammeScriptContainer/ProgrammeElements/SortableItem.js +++ b/packages/components/ProgrammeScriptContainer/ProgrammeElements/SortableItem.js @@ -12,7 +12,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import SortableHandle from './SortableHandle'; -const SortableItem = SortableElement(({ value, index, handleDelete, handleEdit }) => { +const SortableItem = SortableElement(({ value, index, handleDelete, handleEdit, backgroundColour, textColour }) => { const EditIcon = ( - +
  • + - {value} + + {value} + {handleEdit ? EditIcon : null} @@ -46,7 +48,7 @@ const SortableItem = SortableElement(({ value, index, handleDelete, handleEdit } {handleDelete ? DeleteIcon : null} - +
    • ); }); diff --git a/packages/components/ProgrammeScriptContainer/ProgrammeElements/index.js b/packages/components/ProgrammeScriptContainer/ProgrammeElements/index.js index 753db32..492e7a7 100644 --- a/packages/components/ProgrammeScriptContainer/ProgrammeElements/index.js +++ b/packages/components/ProgrammeScriptContainer/ProgrammeElements/index.js @@ -32,10 +32,12 @@ const ProgrammeElements = (elements, handleEdit, handleDelete) => { if (type === 'insert') { return ( - ); From 067f1c74b9503ab4d73034a822df1feebf99d686 Mon Sep 17 00:00:00 2001 From: Eimi Okuno Date: Wed, 11 Sep 2019 09:49:06 +0100 Subject: [PATCH 10/26] Removed import --- .../ProgrammeScriptContainer/ProgrammeElements/index.js | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/components/ProgrammeScriptContainer/ProgrammeElements/index.js b/packages/components/ProgrammeScriptContainer/ProgrammeElements/index.js index 492e7a7..df47993 100644 --- a/packages/components/ProgrammeScriptContainer/ProgrammeElements/index.js +++ b/packages/components/ProgrammeScriptContainer/ProgrammeElements/index.js @@ -7,7 +7,6 @@ import TitleHeading from './TitleHeading'; import Note from './Note'; import SortableItem from './SortableItem'; -import SortableInsert from './SortableInsert'; const adaptAddedElement = (type, text) => { switch (type) { From d3878e000aee1ae62916cc649a0304ce4626d13e Mon Sep 17 00:00:00 2001 From: Eimi Okuno Date: Wed, 11 Sep 2019 11:11:18 +0100 Subject: [PATCH 11/26] Updating the layout of the code --- .../ProgrammeScriptContainer/ProgrammeElements/PaperCut.js | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/packages/components/ProgrammeScriptContainer/ProgrammeElements/PaperCut.js b/packages/components/ProgrammeScriptContainer/ProgrammeElements/PaperCut.js index 699b5ea..42d8364 100644 --- a/packages/components/ProgrammeScriptContainer/ProgrammeElements/PaperCut.js +++ b/packages/components/ProgrammeScriptContainer/ProgrammeElements/PaperCut.js @@ -18,8 +18,11 @@ const PaperCut = (props) => { title={ `stat: ${ w.start }- end: ${ w.end }` } data-start={ w.start } data-end={ w.end } - >{w.text} - );}); + > + {w.text} + + ); + }); } return ( From 5937eafa314fe3737765bed1e28eaf682ce9a8ba Mon Sep 17 00:00:00 2001 From: Eimi Okuno Date: Wed, 11 Sep 2019 11:12:31 +0100 Subject: [PATCH 12/26] Removed comments --- .../ProgrammeScriptContainer/ProgrammeElements/PaperCut.js | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/components/ProgrammeScriptContainer/ProgrammeElements/PaperCut.js b/packages/components/ProgrammeScriptContainer/ProgrammeElements/PaperCut.js index 42d8364..6f3f299 100644 --- a/packages/components/ProgrammeScriptContainer/ProgrammeElements/PaperCut.js +++ b/packages/components/ProgrammeScriptContainer/ProgrammeElements/PaperCut.js @@ -12,7 +12,6 @@ const PaperCut = (props) => { words = props.words.map((w) => { return ( Date: Wed, 11 Sep 2019 11:16:13 +0100 Subject: [PATCH 13/26] refactor voice over --- .../ProgrammeElements/VoiceOver.js | 25 +++++-------------- 1 file changed, 6 insertions(+), 19 deletions(-) diff --git a/packages/components/ProgrammeScriptContainer/ProgrammeElements/VoiceOver.js b/packages/components/ProgrammeScriptContainer/ProgrammeElements/VoiceOver.js index 5523b86..87d42af 100644 --- a/packages/components/ProgrammeScriptContainer/ProgrammeElements/VoiceOver.js +++ b/packages/components/ProgrammeScriptContainer/ProgrammeElements/VoiceOver.js @@ -1,24 +1,11 @@ -import React, { Component } from 'react'; +import React from 'react'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { faMicrophoneAlt } from '@fortawesome/free-solid-svg-icons'; -class VoiceOver extends Component { - constructor(props) { - super(props); - this.state = { - - }; - } - - render() { - return ( - <> -

    - { this.props.text } -

    - - ); - } -} +const VoiceOver = ({ text }) => +

    + + { text } +

    ; export default VoiceOver; From 8a77a9c3781a6cee200f384ab4b2f83694aac606 Mon Sep 17 00:00:00 2001 From: Eimi Okuno Date: Wed, 11 Sep 2019 11:22:22 +0100 Subject: [PATCH 14/26] moving sortable list to inside the programme script --- .../components/ProgrammeScriptContainer/index.js | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/packages/components/ProgrammeScriptContainer/index.js b/packages/components/ProgrammeScriptContainer/index.js index 5f7e080..fa72b11 100644 --- a/packages/components/ProgrammeScriptContainer/index.js +++ b/packages/components/ProgrammeScriptContainer/index.js @@ -4,14 +4,6 @@ import arrayMove from 'array-move'; import { SortableContainer, } from 'react-sortable-hoc'; import ProgrammeElements from './ProgrammeElements'; -const SortableList = SortableContainer(({ children }) => { - return ( -
      - {children} -
    - ); -}); - const ProgrammeScriptContainer = (props) => { const programmeElements = ProgrammeElements(props.items, props.handleEdit, props.handleDelete); const [ elements, setElements ] = useState(programmeElements); @@ -22,6 +14,14 @@ const ProgrammeScriptContainer = (props) => { setElements(result); }; + const SortableList = SortableContainer(({ children }) => { + return ( +
      + {children} +
    + ); + }); + return ( {elements} From 564bbe88239d9abd9d0820fc2331eea1828fbed5 Mon Sep 17 00:00:00 2001 From: Eimi Okuno Date: Wed, 11 Sep 2019 11:23:12 +0100 Subject: [PATCH 15/26] simplifying sortable list --- .../components/ProgrammeScriptContainer/index.js | 12 +++++------- 1 file changed, 5 insertions(+), 7 deletions(-) diff --git a/packages/components/ProgrammeScriptContainer/index.js b/packages/components/ProgrammeScriptContainer/index.js index fa72b11..9f48a92 100644 --- a/packages/components/ProgrammeScriptContainer/index.js +++ b/packages/components/ProgrammeScriptContainer/index.js @@ -14,13 +14,11 @@ const ProgrammeScriptContainer = (props) => { setElements(result); }; - const SortableList = SortableContainer(({ children }) => { - return ( -
      - {children} -
    - ); - }); + const SortableList = SortableContainer(({ children }) => +
      + {children} +
    + ); return ( From 6d600e452455d6b84e01d0cb3d9075567978a288 Mon Sep 17 00:00:00 2001 From: Eimi Okuno Date: Wed, 11 Sep 2019 11:25:34 +0100 Subject: [PATCH 16/26] Update packages/components/ProgrammeScriptContainer/ProgrammeElements/PaperCut.js --- .../ProgrammeScriptContainer/ProgrammeElements/PaperCut.js | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/components/ProgrammeScriptContainer/ProgrammeElements/PaperCut.js b/packages/components/ProgrammeScriptContainer/ProgrammeElements/PaperCut.js index 6f3f299..d9ef319 100644 --- a/packages/components/ProgrammeScriptContainer/ProgrammeElements/PaperCut.js +++ b/packages/components/ProgrammeScriptContainer/ProgrammeElements/PaperCut.js @@ -39,7 +39,6 @@ const PaperCut = (props) => { {/* TagExample */} - {/*

    { JSON.stringify(this.props.words) }

    */} { words } From 13b1716fd888da6f0dd06fcbcdf95469881cc749 Mon Sep 17 00:00:00 2001 From: Eimi Okuno Date: Wed, 11 Sep 2019 11:25:40 +0100 Subject: [PATCH 17/26] Update packages/components/ProgrammeScriptContainer/stories/index.stories.js --- .../ProgrammeScriptContainer/stories/index.stories.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/components/ProgrammeScriptContainer/stories/index.stories.js b/packages/components/ProgrammeScriptContainer/stories/index.stories.js index b14101a..2b012d4 100644 --- a/packages/components/ProgrammeScriptContainer/stories/index.stories.js +++ b/packages/components/ProgrammeScriptContainer/stories/index.stories.js @@ -39,7 +39,6 @@ const items = [ }, ]; -// export const elements = ProgrammeElements(items, handleEditActions, handleDeleteActions); storiesOf('ProgrammeScript', module) .add('Default', () => @@ -49,4 +48,4 @@ storiesOf('ProgrammeScript', module) handleEdit={ handleEditActions } handleReorder={ handleReorderActions } /> - ); \ No newline at end of file + ); From a8bc602883d6c7a576f0e4fb895ad63483450c0d Mon Sep 17 00:00:00 2001 From: Eimi Okuno Date: Thu, 12 Sep 2019 12:13:11 +0100 Subject: [PATCH 18/26] Update packages/components/ProgrammeScriptContainer/ProgrammeElements/PaperCut.js Co-Authored-By: Alli Shultes --- .../ProgrammeScriptContainer/ProgrammeElements/PaperCut.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/ProgrammeScriptContainer/ProgrammeElements/PaperCut.js b/packages/components/ProgrammeScriptContainer/ProgrammeElements/PaperCut.js index d9ef319..1629bb7 100644 --- a/packages/components/ProgrammeScriptContainer/ProgrammeElements/PaperCut.js +++ b/packages/components/ProgrammeScriptContainer/ProgrammeElements/PaperCut.js @@ -14,7 +14,7 @@ const PaperCut = (props) => { From 30b09c40746ff4b88310df100891a26ce8062c18 Mon Sep 17 00:00:00 2001 From: Eimi Okuno Date: Thu, 12 Sep 2019 12:13:26 +0100 Subject: [PATCH 19/26] Update packages/components/ProgrammeScriptContainer/ProgrammeElements/PaperCut.js Co-Authored-By: Alli Shultes --- .../ProgrammeScriptContainer/ProgrammeElements/PaperCut.js | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/components/ProgrammeScriptContainer/ProgrammeElements/PaperCut.js b/packages/components/ProgrammeScriptContainer/ProgrammeElements/PaperCut.js index 1629bb7..6e9dd76 100644 --- a/packages/components/ProgrammeScriptContainer/ProgrammeElements/PaperCut.js +++ b/packages/components/ProgrammeScriptContainer/ProgrammeElements/PaperCut.js @@ -25,7 +25,6 @@ const PaperCut = (props) => { } return ( - <> Date: Thu, 12 Sep 2019 12:18:49 +0100 Subject: [PATCH 20/26] Update packages/components/ProgrammeScriptContainer/ProgrammeElements/PaperCut.js --- .../ProgrammeScriptContainer/ProgrammeElements/PaperCut.js | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/components/ProgrammeScriptContainer/ProgrammeElements/PaperCut.js b/packages/components/ProgrammeScriptContainer/ProgrammeElements/PaperCut.js index 6e9dd76..dc0d551 100644 --- a/packages/components/ProgrammeScriptContainer/ProgrammeElements/PaperCut.js +++ b/packages/components/ProgrammeScriptContainer/ProgrammeElements/PaperCut.js @@ -41,7 +41,6 @@ const PaperCut = (props) => { { words } - ); }; From 5099b33840b766bf1daed011decec45d1502e479 Mon Sep 17 00:00:00 2001 From: Eimi Okuno Date: Thu, 12 Sep 2019 12:19:18 +0100 Subject: [PATCH 21/26] Update packages/components/ProgrammeScriptContainer/ProgrammeElements/index.js Co-Authored-By: Alli Shultes --- .../ProgrammeScriptContainer/ProgrammeElements/index.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/components/ProgrammeScriptContainer/ProgrammeElements/index.js b/packages/components/ProgrammeScriptContainer/ProgrammeElements/index.js index df47993..c77af71 100644 --- a/packages/components/ProgrammeScriptContainer/ProgrammeElements/index.js +++ b/packages/components/ProgrammeScriptContainer/ProgrammeElements/index.js @@ -11,7 +11,7 @@ import SortableItem from './SortableItem'; const adaptAddedElement = (type, text) => { switch (type) { case 'title': - return (); + return ; case 'voice-over': return ; case 'note': @@ -70,4 +70,4 @@ const ProgrammeElements = (elements, handleEdit, handleDelete) => { }); }; -export default ProgrammeElements; \ No newline at end of file +export default ProgrammeElements; From 0ad35f38a244a543112cb0a9e3d7030590aa3f54 Mon Sep 17 00:00:00 2001 From: Eimi Okuno Date: Thu, 12 Sep 2019 12:26:20 +0100 Subject: [PATCH 22/26] Update packages/components/ProgrammeScriptContainer/ProgrammeElements/SortableItem.js Co-Authored-By: Alli Shultes --- .../ProgrammeElements/SortableItem.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/components/ProgrammeScriptContainer/ProgrammeElements/SortableItem.js b/packages/components/ProgrammeScriptContainer/ProgrammeElements/SortableItem.js index 9ee61d2..27dbf40 100644 --- a/packages/components/ProgrammeScriptContainer/ProgrammeElements/SortableItem.js +++ b/packages/components/ProgrammeScriptContainer/ProgrammeElements/SortableItem.js @@ -41,7 +41,7 @@ const SortableItem = SortableElement(({ value, index, handleDelete, handleEdit, {value} - + {handleEdit ? EditIcon : null} @@ -52,4 +52,4 @@ const SortableItem = SortableElement(({ value, index, handleDelete, handleEdit, ); }); -export default SortableItem; \ No newline at end of file +export default SortableItem; From 9baa644b14c56d4f8e6e433f59e1d57a504977e4 Mon Sep 17 00:00:00 2001 From: Eimi Okuno Date: Thu, 12 Sep 2019 12:26:57 +0100 Subject: [PATCH 23/26] Update packages/components/ProgrammeScriptContainer/ProgrammeElements/SortableItem.js Co-Authored-By: Alli Shultes --- .../ProgrammeScriptContainer/ProgrammeElements/SortableItem.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/ProgrammeScriptContainer/ProgrammeElements/SortableItem.js b/packages/components/ProgrammeScriptContainer/ProgrammeElements/SortableItem.js index 27dbf40..9595c7b 100644 --- a/packages/components/ProgrammeScriptContainer/ProgrammeElements/SortableItem.js +++ b/packages/components/ProgrammeScriptContainer/ProgrammeElements/SortableItem.js @@ -33,7 +33,7 @@ const SortableItem = SortableElement(({ value, index, handleDelete, handleEdit, return (
  • - + From 16641447e88744963fb4599ba6965136f494e275 Mon Sep 17 00:00:00 2001 From: Eimi Okuno Date: Thu, 12 Sep 2019 12:27:04 +0100 Subject: [PATCH 24/26] Update packages/components/ProgrammeScriptContainer/ProgrammeElements/SortableItem.js Co-Authored-By: Alli Shultes --- .../ProgrammeScriptContainer/ProgrammeElements/SortableItem.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/ProgrammeScriptContainer/ProgrammeElements/SortableItem.js b/packages/components/ProgrammeScriptContainer/ProgrammeElements/SortableItem.js index 9595c7b..f99e886 100644 --- a/packages/components/ProgrammeScriptContainer/ProgrammeElements/SortableItem.js +++ b/packages/components/ProgrammeScriptContainer/ProgrammeElements/SortableItem.js @@ -36,7 +36,7 @@ const SortableItem = SortableElement(({ value, index, handleDelete, handleEdit, - + {value} From d8b85e22368be78a301adadf605218812bc1aad0 Mon Sep 17 00:00:00 2001 From: Eimi Okuno Date: Thu, 12 Sep 2019 12:27:13 +0100 Subject: [PATCH 25/26] Update packages/components/ProgrammeScriptContainer/ProgrammeElements/SortableItem.js Co-Authored-By: Alli Shultes --- .../ProgrammeScriptContainer/ProgrammeElements/SortableItem.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/ProgrammeScriptContainer/ProgrammeElements/SortableItem.js b/packages/components/ProgrammeScriptContainer/ProgrammeElements/SortableItem.js index f99e886..a5237ec 100644 --- a/packages/components/ProgrammeScriptContainer/ProgrammeElements/SortableItem.js +++ b/packages/components/ProgrammeScriptContainer/ProgrammeElements/SortableItem.js @@ -44,7 +44,7 @@ const SortableItem = SortableElement(({ value, index, handleDelete, handleEdit, {handleEdit ? EditIcon : null} - + {handleDelete ? DeleteIcon : null} From babf61c926b150afc7845cc97e586728ddeecf78 Mon Sep 17 00:00:00 2001 From: Eimi Okuno Date: Thu, 12 Sep 2019 13:01:38 +0100 Subject: [PATCH 26/26] Refactoring the number of arguments passed in into the Sortable Items --- .../ProgrammeElements/SortableItem.js | 19 ++++++++++------ .../ProgrammeElements/index.js | 22 ++++++++++++++----- 2 files changed, 28 insertions(+), 13 deletions(-) diff --git a/packages/components/ProgrammeScriptContainer/ProgrammeElements/SortableItem.js b/packages/components/ProgrammeScriptContainer/ProgrammeElements/SortableItem.js index 9ee61d2..56195c1 100644 --- a/packages/components/ProgrammeScriptContainer/ProgrammeElements/SortableItem.js +++ b/packages/components/ProgrammeScriptContainer/ProgrammeElements/SortableItem.js @@ -12,13 +12,13 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import SortableHandle from './SortableHandle'; -const SortableItem = SortableElement(({ value, index, handleDelete, handleEdit, backgroundColour, textColour }) => { +const SortableItem = SortableElement(({ value, handleFns, colourOpts }) => { const EditIcon = ( { handleEdit(index); } }> + onClick={ handleFns.edit }> ); @@ -26,30 +26,35 @@ const SortableItem = SortableElement(({ value, index, handleDelete, handleEdit, { handleDelete(index); } }> + onClick={ handleFns.delete }> ); return (
  • - + - + {value} - {handleEdit ? EditIcon : null} + {handleFns.edit ? EditIcon : null} - {handleDelete ? DeleteIcon : null} + {handleFns.delete ? DeleteIcon : null}
    • ); }); +SortableItem.defaultProps = { + colourOpts: {}, + handleFns: {} +}; + export default SortableItem; \ No newline at end of file diff --git a/packages/components/ProgrammeScriptContainer/ProgrammeElements/index.js b/packages/components/ProgrammeScriptContainer/ProgrammeElements/index.js index df47993..3b9e63b 100644 --- a/packages/components/ProgrammeScriptContainer/ProgrammeElements/index.js +++ b/packages/components/ProgrammeScriptContainer/ProgrammeElements/index.js @@ -24,25 +24,37 @@ const adaptAddedElement = (type, text) => { }; const ProgrammeElements = (elements, handleEdit, handleDelete) => { + return elements.map((el, index) => { const key = cuid(); const type = el.type; const text = el.text; + const handleFns = { + edit: () => { handleEdit(index);}, + delete: () => { handleDelete(index);} + }; + if (type === 'insert') { + const colourOpts = { + background: 'orange', + text: 'white' + }; + return ( ); } if (type === 'paper-cut') { + handleFns.edit = null; + return ( { words={ el.words } /> } - handleDelete={ handleDelete } - handleEdit={ null } + handleFns={ handleFns } />); } @@ -63,8 +74,7 @@ const ProgrammeElements = (elements, handleEdit, handleDelete) => { key={ key } index={ index } value={ adaptAddedElement(type, text) } - handleDelete={ handleDelete } - handleEdit={ handleEdit } + handleFns={ handleFns } /> ); });