Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@copart/notes-component

Package Overview
Dependencies
Maintainers
17
Versions
106
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@copart/notes-component

## Introduction

  • 1.0.9-alpha.6
  • npm
  • Socket score

Version published
Weekly downloads
107
decreased by-34.76%
Maintainers
17
Weekly downloads
 
Created
Source

Ops Notes Component Library

Introduction

Notes component built with React using Fabric, and styled-components.

Props

NameTypeRequiredDefaultDescription
notesObjectYesNotes object containing all notes
handleNewSubmitFunctionYesFunction that fires when submitting a new note. Takes in input string and selected Note type
timeZonestringNomoment.tz.guess()Current timezone to correctly display timestamps through moment-timezone (by default will try to guess user's timezone based on browser)
onOpenFunctionNoFunction that fires whenever the notes module is opened
onCloseFunctionNoFunction that fires whenever the notes module is closed
loadingNotesbooleanNofalsePass true when loading notes and false when finished, for spinner
titlestringNo'00000000'Title for the header following the prefix
titlePrefixstringNo'Lot#'Prefix for the header
searchTypeKeystringNo'lotNotes'Default search key for searchbar dropdown. (Must match a key on the object passed to the notes prop)
buttonTextstringNo'Notes'Text for the closed notes button
keyboardShortcutstringNo'F6'Keyboard key to open the notes modules
boundsstringNo'body'Restriction for the draggable area of the open notes module
defaultPositionObjectNo{ x: 0, y: 0 }Default x and y position of the open notes module when it is first opened
autoSearchbooleanNotrueAutomatically search notes every time user types in searchbox rather than on search button click
stickyHeaderbooleanNotrueEnable sticky headers for every note to help user maintain context on long notes
defaultOpenbooleanNofalseWhether or not notes are open by default on component load
disableNewNotebooleanNofalseWhether or not to show new note input
translationsObjectNoTranslations for localization
handleScrollEndFunctionNoFunction to handle the end of scroll in notes
onChangeNoteFunctionNoFunction to handle change of note
reverseListbooleanNotrueFlag to determine if the list has to be reversed
loadNextPagebooleanNofalseFlag to determine if the next page list needs to be fetched
disabledbooleanNofalseDisables the note button
dateTimeFormatbooleanNo'MMM Do [']YY h:mma z'Change the format of the date and time (use moment supported formats: https://momentjs.com/docs/#/parsing/string-format/ )

Code Example

Component

import React from 'react'
import Notes from '@copart/notes-component'

// Refer below for example data structure
import { exampleNotes } from './exampleNotes'
import exampleTranslationsMap from './exampleTranslationsMap'

class App extends React.Component {
  state = {
    id: '12345678',
    notes: {},
    loading: false,
  }
  onOpen = () => {
    this.setState({ loading: true })
    // Mock async call to retrieve notes
    setTimeout(() => {
      this.setState({ loading: false, notes: exampleNotes })
    }, 1000)
  }
  onSubmit = (newNoteText) => {
    // async POST request goes here
    const newNotes = { ...exampleNotes }
    newNotes.lotNotes.data.push({
      crt_dt: '2018-08-27T07:41:04.000Z',
      crt_user: 'username',
      note_desc: newNoteText,
    })
    // on async response with new notes
    this.setState({ loading: false, notes: newNotes })
  }
  render() {
    const { notes, loading, id } = this.state
    return (
      <Notes
        titlePrefix="ID#"
        title={id}
        notes={notes}
        onOpen={this.onOpen}
        handleNewSubmit={this.onSubmit}
        loadingNotes={loading}
        searchTypeKey="noteTypeKey2"
        timeZone="Europe/Berlin"
        translations={exampleTranslationsMap}
        // dateTimeFormat={'MM/DD/YYYY HH:mm:ss z'}
        // disabled={true}
      />
    )
  }
}

export default App

Notes Object Example

// Import map and translation data for tables
import { EXAMPLE_PATHS as examplePaths, EXAMPLE_FIELD_MAP as exampleFieldMap } from './examplePaths'
import exampleStages from './exampleStages'

// Example notes object
export const exampleNotes = {
  // Keys in this object will be used for the dropdown menu
  noteTypeKey1: {
    display: 'NOTE TYPE 1', // send the translated version here, if applicable
    format: 'table', // only 'table' or 'text' format supported
    servicePaths: examplePaths, // service paths for finding correct data to show
    stages: exampleStages, // translate stages to readable text
    fieldMap: exampleFieldMap, // link field key provided to correct key in translations
    data: [
      {
        crt_user: 'username1',
        crt_dt: '2018-08-22T07:41:04.000Z',
        // 'table' format must have json property
        json: {
          previous_lot: {
            field_1: 'value',
            // field can contain another object (must provide path in service paths)
            field_2: {
              inner_prop_1: null,
              inner_prop_2: 'abc',
            },
            field_3: 123,
          },
          current_lot: {
            field_1: 'other_value',
            field_2: {
              inner_prop_1: null,
              inner_prop_2: 'cba',
            },
            field_3: 321,
          },
        },
      },
      {
        crt_user: 'username2',
        crt_dt: '2018-08-23T07:41:04.000Z',
        // 'table' format must have json property
        json: {
          previous_lot: {
            field_1: 'value',
          },
          current_lot: {
            field_1: 'other_value',
          },
        },
      },
    ],
  },
  noteTypeKey2: {
    display: 'NOTE TYPE 2', // send the translated version here, if applicable
    format: 'text', // only 'table' or 'text' format supported
    enableAddNote: true, // enables text input for new notes
    data: [
      {
        crt_user: 'username1',
        crt_dt: '2018-08-22T07:41:04.000Z',
        // 'text' format must have 'notes' or 'note_desc' property
        notes: 'Note text 1',
      },
      {
        crt_user: 'username2',
        crt_dt: '2018-08-23T07:41:04.000Z',
        notes: 'Note text 2',
      },
    ],
  },
  noteTypeKey3: {
    display: 'NOTE TYPE 3', // send the translated version here, if applicable
    format: 'text', // only 'table' or 'text' format supported
    data: [
      {
        crt_user: 'username1',
        crt_dt: '2018-08-22T07:41:04.000Z',
        // 'text' format must have 'notes' or 'note_desc' property
        note_desc: 'Note description text 1',
      },
      {
        crt_user: 'username2',
        crt_dt: '2018-08-23T07:41:04.000Z',
        note_desc: 'Note description text 2',
      },
    ],
  },
}

Service Paths Example

export const EXAMPLE_PATHS = {
  field_1: ['field_1'],
  field_2: ['field_2', 'inner_prop_2'],
  field_3: ['field_3'],
}
export const EXAMPLE_FIELD_MAP = {
  field_1: 'field1',
  field_2: 'field2',
  field_3: 'field3',
}

Stages Example

const exampleStages = {
  value: 'Readable value', // send translated versions here
  other_value: 'Other readable value', // send translated versions here
}
export default exampleStages

Translations Map Example

const exampleTranslationsMap = {
  field1: 'Field One', // send translated versions here
  field2: 'Field Two', // send translated versions here
  field3: 'Field Three', // send translated versions here
}

Contributions

Contributions are welcome, create a Pull Request for any improvements/fixes.

FAQs

Package last updated on 28 Oct 2020

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc