1.0.10 • Published 1 year ago

@takamaki-group/ui-components v1.0.10

Weekly downloads
-
License
ISC
Repository
bitbucket
Last release
1 year ago

Takamaki react js UI Components

This package used to share all re-usable react js components created by our company.

Alt Text

How to use

  • open your react js project directory and run this code
npm install @takamaki-group/ui-components
  • import the component you want to use
import { ImageMarker, ImageMarkerPreview } from '../../../material-component/dist';

// ...

return (
    <ImageMarkerPreview
        data={data}
        openLayerDimensions={[1024, 968]}
    />
)

Or by import the default object

import TakamakiMaterialComponents from '../../../material-component/dist';

// ...

return (
    <TakamakiMaterialComponents.ImageMarkerPreview
        data={data}
        openLayerDimensions={[1024, 968]}
    />
);

Components list

ImageMarker

ImageMarkerPreview

ImageMarker

A UI component use Openlayer to mark a specific image.

Properties

namedescriptionexamplerequireddefault value
openLayerDimensionswill divide the image to columns and rows so the marker will be in the location of col no x and row number y no of col, no of rows1024,600no1024,968
removeMessagethe remove button message"delete"no"remove"
saveMessagethe save button message"save"no"save"
previewused to make the component in preview mode (will disable the buttons)nofalse
photoDatathe Image Data{ photo: "image Url", ...any_other_properties }yes___
datathe marker data (if this property not added, the marker will not be added too that mean the marker not set yet){ coordinates: {x: 37, y:70}, ...any_other_properties }no___
handleSavemethod will fire when click save button(data, latestCoordinates)=>{ console.log(data); // all properties of data and photoData console.log(latestCoordinates); // {x: 37, y:70}yes___
handleClosemethod will fire when click save button()=>{}no___

ImageMarkerPreview

A UI component use Canvas that draw the image as a background and draw a marker on the provided location.

Properties

namedescriptionexamplerequireddefault value
openLayerDimensionswill divide the image to columns and rows so the marker will be in the location of col no x and row number y no of col, no of rows1024,600no1024,968
datathe marker data{ coordinates: {x: 37, y:70}, photo: "image Url", }yes___
onLoada method fire when the image and marker loaded()=>{ console.log('component loaded'); }no___
classNameyou can add any class to main component using this property"component_class_name"no___
containerClassNameyou can add any class to the image container"conatainer_class_name"no___
imageClassNameyou can add any class to the image tag"image_class_name"no___
1.0.10

1 year ago

1.0.9

1 year ago

1.0.8

1 year ago

1.0.7

1 year ago

1.0.6

1 year ago

1.0.5

1 year ago

1.0.4

1 year ago

1.0.4-beta.0

1 year ago

1.0.3-beta.3

1 year ago

1.0.3-beta.1

1 year ago

1.0.3-beta.0

1 year ago

1.0.3

1 year ago

1.0.2

1 year ago

1.0.1

1 year ago

1.0.0

1 year ago